序 


这 是 一 本 具有 强烈 ThoughtWorks 项 目 风格 的 书 。 书 中 打造 的 实战 项 目 完全 遵循 了 ThoughtWorks 工 程 实践 ， 一 步 一 步 从 最 初 的 框架 通过 快速 迭代 逐步 丰富 项 目的 骨肉 ， 并 在 这 个 过 程 中 抽 丝 剥 草地 展 


现 了 AngulanjS 的 诸多 特性 与 技巧 ， 如 循循善诱 的 导师 一 步 步 指 导 着 你 从 AngulamJS 的 小 工 走 向 专家 。 


这 里 所 谓 的 “专家 ”不 仅仅 是 指 你 对 AngulamJs 的 诸多 技巧 尽 篆 了 然 于 胸 ， 能 够 挥 酒 自如 地 运用 于 项 目 开 发 中 一 一 若 能 如 此 ， 不 过 是 “ 唯 手 熟 尔 ”的 工匠 罢了 。 真 正 的 专家 需要 从 大 处 着 手 ， 挖 掘 这 门 


技术 背后 隐 含 的 设计 思想 与 哲学 ， 换 言 之 ， 需 要 知 其 所 以 然 ， 却 又 不 偏 废 细 节 ， 锚 铁 必 较 每 个 变量 函数 的 命名 格式 ， 使 代码 至 于 完美 ， 并 从 中 提炼 出 能 够 推 而 广 之 的 最 佳 实践 。 


从 知 其 所 以 然 入 手 ， 书 中 的 第 3 章 “ 背 后 的 原理 ”加 强 了 内 容 的 深度 ， 使 得 本 书 不 至 于 沦落 为 一 本 Example Step by Step。 书 中 通过 对 MVVM 模 式 的 阐释 ,解释 了 Angular JS 的 设计 原理 与 启动 流程 


并 给 出 了 Angular JS 开发 的 注意 事项 。 书 中 写 道 : 


MVVM 模 式 的 要 点 是 : 以 领域 Model 为 中 ， 遵 循 “分 离 关注 点 ”设计 原则 。 这 也 是 Angulat 的 模型 驱动 思维 与 jQuery 的 DOM 驱 动 思维 的 显著 差异 。 所 以 我 们 在 做 Angular 开 发 的 时 候 应 该 说 记 以 下 两 点 : 


: 绝 不 要 先 设计 你 的 页 面 ， 然 后 用 DOM 操 作 去 改变 它 。 


“ 指令 不 是 封装 jQuery 代码 的 “天 堂 ”。 


又 例如 细节 之 处 ， 本 书 作者 仿佛 是 跳 着 针尖 在 跳舞 ， 刻 绘 的 细节 纤 毫 毕 现 ， 又 佐 以 代码 ， 论 证 有 理 有 据 ; 阅读 时 ， 真 好 像 是 你 和 雪 狼 、 破 狼 在 一 起 结对 编程 呢 。 例 如 书 中 在 提 及 对 服务 访问 对 象 


(SAO) 的 封装 时 ， 给 出 了 这 样 两 段 代码 : 


angular.module ('com.ngnice.app') .controller ('ReaderCreateCtr1'，function Reader-CreateCtrl ($resource) { 
var wm = this; 
var Reader = $resource('/api/readers/:id', {id: '@id'}); 
vm.submit = function (form) { 
Reader .save (form); 


封装 后 : 


angular.module ('com.ngnice.app') .controller ('ReaderCreateCtrl', function Reader-CreateCtrl (Reader) { 
var wm = this; 
vm.submit = function (form) { 
Reader .save (form); 
] 7 
Hi 


寥寥 几 行 代码 的 区 别 ， 却 体现 了 作者 对 于 代码 可 读 性 的 执着 追求 。 如 此 内 容 在 书 中 俯 拾 错 是 。 作 者 对 整洁 代码 的 敏感 度 ， 就 好 像 水 银 温度 计 对 气温 的 感知 一 般 ， 哪 怕 是 一 丝 一 毫 都 能 准确 感知 ， 进 而 在 


展开 的 文字 叙述 中 潜移默化 地 影响 读者 。 尤 其 针对 初学 者 ， 作 者 从 一 开始 就 展示 了 什么 是 AngularJS 之 美 ， 什 么 是 代码 之 美 ， 什 么 是 设计 之 美 ， 就 好 似 建 立 了 AngularJS 世 界 的 “ 洪 规则 ”， 入 了 这 


个 圈 ， 你 


需 如 此 这 般 ， 否 则 就 得 荆棘 一 路 ， 步 履 唤 咒 。 而 那些 优秀 的 工程 实践 ， 例 如 测试 驱动 开发 、 面 向 模型 编程 、 迭 代 的 演化 、 一 次 只 做 一 件 事 情 的 行为 准则 ， 则 完全 融化 成 本 书 的 血液 ， 通 过 简单 朴实 的 词语 ， 


天 然 地 流 消 在 整 本 书 中 ， 和 风 细 雨 ， 润 物 细 无 声 。 


我 与 本 书 的 作者 之 一 破 狼 相交 甚 深 ， 虽 然 一 直 未 有 机 会 共同 战斗 在 一 个 项 目 ， 却 也 有 许多 机 会 彼此 沟通 各 自 对 设计 的 理解 。 在 面向 对 象 设 计 、 领 域 驱动 设计 、 架 构 设计 等 诸多 方面 ， 我 们 抱 有 相同 的 设 
计 态 度 ， 可 谓 志同道合 。 问 道 技术 ， 犹 如 饮酒 论文 ， 酒 柄 耳 热 时 ， 得 聆 佳音 ， 当 浮 一 大 白 ， 人 生 乐 趣 大 抵 如 此 。 虽 然 我 对 前 端 技 术 所 知 了 了 ， 但 阅读 此 书 ， 许 多 论点 刚好 击 中 我 的 腑 肺 ， 那 种 如 寻 克 到 知己 


一 般 的 快乐 ， 真 可 以 说 是 阅读 之 余 的 额外 收获 了 。 我 喜欢 此 书 的 朴实 ， 它 没有 去 构架 球 渺 高 深 的 理论 ， 没 有 浮夸 地 吹 咕 AngulanJS 如 何 优秀 ， 在 前 端 开发 中 所 向 披 靡 。 技 术 人 写 文章 ， 常 常 没有 卖弄 ， 只 是 
踏实 地 表达 对 技术 的 一 己 之 得 ， 读 者 得 到 的 却 是 字 字 铮 铮 的 金石 之 音 。 
显然 ， 这 是 一 本 工程 师 写 给 工程 师 阅 读 的 书 ， 我 只 可 惜 这 本 书 的 出 版 来 得 有 点 晚 了 。 
是 为 序 。 
张 选 
2015 年 8 月 7 日 夜 ”旅行 中 ， 在 斯 坦 福 大 学 安静 的 校园 
前 言 
新 时 代 
新 挑战 
时 代 已 经 不 同 了 ! 


刚 传 入 中 国 。 


17 年 前 ， 当 我 的 第 一 个 作品 推 入 市 场 的 时 候 ， 互 联网 才 网 


那 时 候 的 软件 不 需要 联网 ， 每 个 用 户 也 不 需要 知道 其 他 用 户 的 存在 。 


那 时 候 只 需要 考虑 PC 运行 环境 ， 而 需要 考虑 的 屏幕 分 辨 率 也 只 有 区 区 三 种 。 


那 时 候 的 软件 项 目 组 多 则 十 几 人 ， 少 则 一 人 ， 而 发 布 周期 常常 会 达到 半年 之 久 。 


现在 ， 一 切 都 不 同 了 。 


现在 ， 连 一 个 手机 电 简 软件 都 在 偷偷 联网 ， 不 能 联网 的 游戏 也 已 经 是 老 古 董 的 代名词 。 


现在 ， 软 件 不 但 运行 在 PC 上 ， 还 要 运行 在 智能 手机 上 ， 运 行 在 各 种 Pad 上 ， 屏 幕 分 辨 率 更 是 多 到 让 研发 和 测试 工程 师 发 直 的 地 步 . 


现在 ， 外 界 看 到 的 产品 其 实 只 是 冰山 一 角 ， 它 背后 还 有 很 多 子 系统 紧密 协作 来 提供 支持 ， 需 求 和 架构 的 复杂 度 也 暴 增 。 


自发 布 周期 


但 最 大 的 挑战 丽 怕 还 是 来 


没 错 ， 这 些 都 是 新 的 挑战 ! 好 在 ， 我 们 也 有 了 新 技术 ! 


新 技术 


这 17 年 间 ， 软 件 业 最 大 的 技术 革命 ， 当 然 首 推 互联 网 。 


互联 网 不 但 拓展 了 软件 业 的 业务 范围 
如 今 


排 在 第 二 位 的 技术 革命 ， 


当 推 移动 互联 网 以 及 智能 终端 。 


， 一 个 不 会 Google (以 及 翻 墙 ) ， 没 上 过 GitHub， 不 知道 stackoverflow 


这 两 场 技术 革命 让 开源 运动 遍地 开花 ， 更 催生 了 无 数 的 新 技术 。 


这 场 革命 不 但 把 曾经 的 


， 更 改变 了 程序 员 获取 知识 和 解决 问题 的 方式 。 


的 程序 员 很 难 想象 会 有 什么 发 


展 空间 。 


期 版 本 在 一 个 月 内 上 线 已 是 常态 ， 而 修复 bug 的 时 间 限 制 则 往往 以 小 时 计 ， 甚 至 以 分 钟 计 。 


革命 爆发 之 前 已 经 就 已 经 相当 成 熟 的 OO 领域 也 有 了 很 大 的 进 


且 不 提 HTTP/HTML/JavaScript/CSS 这 些 耳 熟 能 详 的 互联 网 基石 ， 就 连 在 互联 
以 MVC 为 例 ， 它 不 但 衍生 出 MVP、MVVM 等 很 多 变种 ， 而 且 从 后 端 领域 扩展 到 了 前 端 领域 。 而 现在 
一 个 “ 极 客 ”总 是 痴迷 于 各 种 “漂亮 ”的 技术 ， 而 Angular 当 之 无 愧 地 是 其 中 之 一 ， 它 可 供 借 鉴 的 地 方 很 多 : 


“ 如 何 弥 补 语言 的 先天 不 足 。 


:如何 干净 漂亮 地 解 耦 。 


- 如 何 设计 “小 而 美 ”的 类 /代码 块 。 


所 以 ， 即 使 你 还 没有 下 决心 把 Angular 应 用 到 项 目 中 ， 也 可 以 在 学 习 Angular 的 过 程 中 获得 一 些 启迪 ， 帮 助 你 重 构 现 有 项 目 。 


新 机 遇 


一 方面 出 现 了 前 所 未 有 的 挑战 ， 另 一 方 


对 于 公司 ， 它 将 影响 产品 形态 、 开 发 速度 和 产品 品质 ， 


b 会 对 团 


面 对 技术 的 快速 进步 ， 有 人 会 感到 恐慌 ， 有 人 会 言 目地 追踪 一 切 新 技术 ， 而 真正 的 极 客 会 看 到 “新 ”技术 中 那些 “不 变 ” 


面 出 现 了 前 所 未 有 的 技术 ， 这 样 的 机 遇 并 不 多 ，“ 极 客 ” 们 欢呼 雀跃 。 


队 的 组 织 架 构 带 来 改变 。 比 如 ， 伴 随 着 设备 的 多 样 化 ， 网 络 服务 的 访问 入 口 


访问 的 网 站 、 供 Pad 访 问 的 网 站 ， 对 于 一 些 追求 极致 


户 体验 的 公司 来 说 ， 还 


作为 开发 人 员 ， 也 许 你 会 看 到 或 正在 经 历 一 个 工作 量 暴 


量 的 暴 增 。“ 前 后 端 分 离 架构 ” 正 是 伴随 着 “前 端 MVC” 的 成 长 而 成 长 的 。 
它 的 原理 很 简单 : 虽然 多 出 了 很 多 访问 入 口 ， 但 是 其 背 


业务 逻辑 紧密 相关 的 那 部 分 AP1， 而 上 


增长 ， 而 是 可 以 先 着 本 


这 样 ， 我 们 的 工作 量 并 不 会 成 倍 
较 容易 得 到 控制 。 


开发 一 个 版 本 ， 让 


增 的 时 代 ， 但 是 ， 不 要 紧张 ， 


提供 给 安 卓 设备 


事情 没 忆 


各 的 业务 逻辑 并 没有 本 质 性 变化 ， 那 么 ， 我 们 是 否 可 以 让 这 一 套 4 
户 交互 等 非 核心 逻辑 则 交 给 前 端 程序 来 完成 。 


pg 么 坏 。 在 新 时 代 ， 有 一 项 是 


后 端 API 和 一 种 形态 的 前 端 应 F 


的 App、 给 苹果 设备 用 的 App。 


要 且 迅 速成 长 的 技术 革新 ， 


王者 诺基亚 打 落 凡尘 ， 而 且 让 苹果 重新 登 上 王位 。 


展 。 


益 火 爆 的 Angular， 正 是 MVC 在 前 端 领域 的 代表 作 之 一 。 


的 元 素 ， 会 在 “新 挑战 ”中 看 到 “新 机 遇 ”， 并 且 把 握 。 


那 就 是 “前 后 端 分 离 架构 ” 


变 得 成 熟 ， 然 后 再 去 


发 其 他 形态 的 前 端 应 用 。 而 这 些 


变 得 多 样 化 : 不 但 需要 有 供电 脑 访问 的 网 站 ， 还 需要 供 手机 


， 它 可 以 有 效 遏 制 工作 


业务 逻辑 为 多 种 不 同形 态 的 终端 服务 呢 ? 管 案 是 肯定 的 ， 那 就 是 让 后 端 只 提供 跟 


其 他 形态 的 前 端 程序 的 工作 量 和 风险 都 比 


但 是 ， 根 据 康 威 定 律 ， 在 新 的 程序 架构 下 ， 项 目的 组 织 架 构 甚至 整个 公司 的 组 织 架 构 都 将 发 生 相 应 的 变化 ， 而 最 显著 的 变化 就 是 出 现 了 专门 的 前 端 工程 师 。 前 端 工程 师 往往 不 是 零 基 础 开始 的 ， 一 小 部 


分 来 自 原来 负责 切 


无 论 对 于 公司 还 是 个 人 ， 


致 读者 


写 给 想 转 职 或 兼 修 前 端的 Web 工 程 师 


本 书面 向 的 读者 ， 第 一 大 群体 是 Web 工 程 师 。 


就 是 这 里 所 说 的 Web 工 程 师 。 
随 着 “前 后 端 分 离 架构 ”的 普及 ， 原 来 的 开发 方式 将 3 


“前 后 端 分 离 架 构 ”出现 之 前 ， 在 大 多 数 Web 应 


E 动 或 被 迫 转 变 。 本 书 将 通 


或 写 JavaScript 特 效 的 工程 师 ， 不 过 大 部 分 是 从 以 前 开发 Web 应 用 的 程序 员 转 型 而 来 的 。 


中 ， 无 论 是 核心 的 业务 逻辑 ， 还 是 表现 


过 实例 引导 你 完成 到 “前 


如 果 你 是 个 Web 工 程 师 ， 在 读本 书 的 时 候 请 留意 上 


对 于 部 分 转 职 过 来 的 Web 工 程 师 ， 除 了 转换 思维 以 外 ， 还 有 一 大 挑战 是 前 端 庞杂 的 知识 体系 : HTML/CSS/JavaScript/ 前 端 工 


在 本 书 中 ， 我 们 无 法 对 此 


展开 讲解 ， 但 这 些 知识 对 于 做 实 | 


开展 培训 时 所 使 用 的 课件 改编 而 来 的 ， 具 有 很 强 的 实战 性 、 


写 给 想 进 阶 为 专业 前 端的 切 图 师 


图 


在 很 多 开发 组 中 ， 切 


师 往往 由 初级 程序 员 或 美工 担任 ， 有 没有 想 过 


实 


户 交互 逻辑 是 如 何 完全 移交 给 前 端 程序 的 ， 而 后 端 程序 又 做 了 


“前 端 MVC” 以 及 相应 的 “前 后 端 分 离 架构 ”都 是 一 个 新 的 机 遇 。 不 思 进 取 的 王者 终 会 没落 ， 勤 奋 好 学 的 新 星 将 会 崛起 ， 希 望 本 书 能 有 幸 成 为 你 的 助力 。 


后 端 分 离 架 构 ” 的 思维 转变 ， 以 及 与 此 相关 的 技术 。 


p 些 精简 ， 特 别 要 注意 体会 模块 职责 的 单一 化 、 专 业 化 趋势 。 


祭 项 目 又 是 必需 的 。 所 以 ， 我 们 只 能 在 附录 中 提供 一 些 重 


自己 将 来 向 哪里 发 展 ? 除了 


工程 师 。 也 可 以 学 习 HTMLVCSS/JavaScript、 上 


当然 ， 如 果 你 足够 聪 
是 个 不 错 的 选择 ， 过 一 段 


时 间 后 未 必 再 有 这 样 好 的 机 遇 。 从 切 


户 体验 、 交 互 设计 、 前 端 框架 等 ， 转 职 为 前 端 工程 | 


明和 有 足够 的 进取 心 ， 你 也 可 以 两 者 兼 修 ， 成 为 一 名 全 栈 工 程 | 


币 。 


面向 对 象 、 项 目 管理 等 必 学 的 


的 技术 要 点 和 “ 坑 ”， 并 且 给 出 一 些 在 线 学 习 资 源 和 书生 


链 /浏览 器 兼容 性 等 ， 每 一 个 领域 都 相当 庞大 。 


基础 技能 之 外 ， 还 可 以 学 习 数 据 库 、 后 端 框架 、 安 全 技术 等 


图 


触 过 一 些 对 Angular 感 兴趣 的 人 ， 总 体 上 说 ， 转 变 思维 比 叶 


入 新 思维 的 难 


师 到 前 端 ， 这 条 路 并 非 荆 棘 重 
度 更 大 。 圈 子 里 


币 。 不 过 ， 相 对 来 说 ， 前 端 这 条 路 径 可 能 更 加 平缓 。 而 且 ， 这 几 年 前 端 职位 正 逐 渐 火 爆 ， 从 个 人 职业 发 
实 上 ， 没 有 传统 Web 工 程 师 的 思维 定 势 ， 这 反倒 


还 常 流传 一 些 无 稽 之 谈 ， 比 如 ，Angular 是 Google 开 发 的 ， 


H 


层 的 交互 逻辑 ， 都 是 完全 运行 在 服务 端的 。 写 这 类 程序 的 程序 员 


EB。 这 些 大 部 分 都 是 从 我 们 


， 转 职 为 后 端 


展 来 说 ， 这 也 


在 笔者 的 编程 、 咨 询 和 教学 过 程 中 ， 曾 接 
向 的 是 Google 中 那些 妖怪 级 程序 员 。 那 都 是 乱 传 的 ， 


没 那 么 丽 怖 。 


我 写 下 这 些 ， 是 希望 你 们 可 以 轻装 上 阵 ，Angular 的 很 多 设计 都 是 遵循 “最 小 意外 ”原则 的 ， 靠 直觉 就 可 以 掌握 ， 


不 过 ， 难 度 仍然 是 有 的 。 读 本 书 之 前 ， 你 至 少 应 该 已 经 熟悉 了 JavaScript 语 法 ， 对 Angular 的 各 逢 


网 上 关于 Angular 入 门 的 文章 。 


说 ,这 仍然 是 不 够 的 ， 所 以 ， 在 附录 中 我 们 还 提供 了 一 些 网 址 和 书生 


对 于 切 图 师 来 说 ，MVC 方 和 


2.0 要 来 了 ， 本 书 会 过 时 吗 ? 


现 , 不 
度 来 看 ，2.x 的 这 种 改进 也 是 一 种 勇敢 的 改过 


Angular 2.x 已 经 进入 了 Alpha 测 试 阶段 ， 那 么 ， 不 免 有 人 担心 ， 等 到 2.x 推 d 


1.x 和 预计 2016 年 推出 的 2.x 在 语法 甚至 一 些 底层 实现 上 是 截然 不 同 的 。 


为 了 向 后 兼容 而 使 


好 消息 是 ，2.x 不 是 1.x 的 替代 品 。 


据 目前 得 到 的 消息 ，2.x 和 将 使 用 TypeScript 和 ES6 作 为 主体 语言 ， 那 时 候 ， 本 书 的 很 多 代码 将 不 再 适 
“ 脏 检查 ”等 技术 来 弥补 浏览 器 的 不 足 。 在 这 些 细节 上 ，1.x 和 2.x 几 如 


以 防止 Angular 背 上 向 老 旧 浏览 器 兼容 的 包 罕 。 


1.x 和 2.x 在 编程 模型 上 并 没有 太 大 的 差异 ， 它 们 都 基于 


章 ， 可 以 让 它 轻 装 前 进 ， 更 有 利于 长 远 发 展 。 


官方 已 经 宣布 ， 即 使 2.x 推 出 ， 也 仍然 会 对 1.x 进 行 长 期 维护 。 这 就 有 点 类 似 3 


FMVVM 模 型 ， 都 具有 双向 绑 定 功能 (即使 底 


“高 估 难 度 ” 


有 害 无 益 。 


于 2.Xx。 而 由 于 2.x 彻 


概念 有 了 大 致 的 了 解 。 如 果 你 对 很 多 新 名 词 不 知 所 云 ， 那 么 建议 先 去 翻阅 一 下 附录 中 的 书籍 ， 浏 览 一 下 


的 基础 往往 会 成 为 短 板 ， 而 JavaScript 中 一 些 诡异 的 特性 也 常常 带 来 困扰 。 所 以 ， 本 书 会 穿插 一 些 这 方面 的 简短 知识 。 但 是 ， 对 于 一 个 立志 成 为 “ 极 客 ”的 初级 程序 员 来 
和 R， 希 望 本 书 能 帮 你 开启 职业 生涯 的 新 阶段 。 


的 时 候 ， 本 书 会 过 时 吗 ” 从 实现 细节 上 来 讲 ， 会 的 。 从 思想 上 来 讲 ， 不 会 。 从 实用 性 上 来 讲 ， 不 会 。 


康 抛 弃 了 IE11 之 前 的 低 版 本 浏览 器 ， 它 可 以 借助 最 新 的 浏览 器 特性 进行 底层 实 
没有 共通 之 处 。 这 一 点 一 直 被 人 诉 病 ， 也 是 一 些 人 对 Angular 的 前 途 深 表 担忧 的 原因 。 不 过 ， 从 另 一 个 角 


我 们 的 书 中 都 有 所 体现 。 在 目录 结构 、 指 令 的 分 类 等 方面 ， 本 书 也 从 2.x 中 引入 了 很 多 更 好 的 实践 。 


从 实 


性 上 来 说 ， 本 书 更 不 会 过 时 


»。 2 


的 浏览 器 兼容 性 起 点 就 是 |E11， 这 不 是 因 
丽 怕 还 会 是 一 个 长 期 的 历程 一 一 即使 最 乐观 的 估计 ， 至 少 也 需要 两 生 


固然 ，2.x 是 个 高 大 上 的 版 本 ,但 目前 在 国内 还 是 个 


阅读 指南 


EE 


Angular 的 学 习 


本 书 的 主体 结构 


b 是 针对 这 样 的 学 


首先 ,初级 阶段 ， 实 战 演练 


习 


线 设计 的 。 


屋 实现 方式 已 经 变 了 ) ， 都 具有 相同 的 设计 哲学 


为 细节 层面 的 问题 ， 而 是 从 底层 原理 上 就 不 可 能 
F。 当然， 手机 端的 浏览 器 版 本 更 新 要 快 得 多 ， 所 以 ， 预 计 2.x 最 早 会 被 用 在 手机 版 上 。 


我 们 会 带 你 在 实战 中 逐步 体验 Angular 的 开发 过 程 ， 并 随 着 进度 的 推进 ， 逐 步 引入 所 需 的 技术 和 概念 。 


然后 ， 中 级 阶段 ， 概 念 介绍 

在 实战 中 提 到 的 一 些 概念 不 会 就 地 
接 下 来 ， 高 级 阶段 ， 工 作 原理 

学 习 了 这 些 概念 ， 我 们 还 要 把 它们 


最 后 ， 专 家 阶段 : 最 佳 实践 ， 技 巧 


前 面 主要 是 入 门 和 理论 ， 而 这 部 分 : 


将 3 


只 把 Angular 用 熟 了 是 不 够 的 ， 我 们 还 要 把 它 整合 进 更 宏观 的 


要 以 实战 经 验 为 主 。 


展开 ， 而 是 只 做 简介 ， 到 了 这 个 阶段 ， 会 对 概念 进行 深入 讲解 : 是 什么 ， 为 什么 ， 怎 么 


串 起 来 ， 向 你 揭示 Angular 的 工作 原理 ， 看 看 这 些 概念 之 间 是 如 何 协作 的 。 


FQuery 2.x 不 再 兼容 |E8， 而 Query 1.x 仍 然 兼 容 IE8 并 继续 向 前 发 展 一 样 。 这 种 版 本 策略 可 


利 


高 内 聚 的 小 模块 组 合 出 最 终 程 序 。 而 这 些 在 


它 依赖 太 多 的 新 特性 。 而 在 国内 市 场 上 ， 彻 底 抛 弃 IE11 以 下 的 版 本 


而 不 


付出 兼容 性 的 代价 。 当 然 ， 等 本 书 的 2.x 版 


线 大 概 是 这 样 的 : 入 门 非常 容易 ， 中 级 的 时 候 会 发 现 需要 深入 理解 很 多 概念 ， 高 级 的 时 候 需 要 掌握 Angular 的 工作 原理 ， 而 想 成 为 专家 则 很 难 ， 需 要 经 过 很 多 工程 实践 的 磨 练 。 


发 过 程 中 ， 不 但 要 考虑 


发 ， 更 要 考虑 维护 。 我 们 要 如 何 


掌握 一 些 技巧 去 把 


zu 
下 


问题 简 


化 ， 发 掘 一 些 不 常 


但 很 有 


坑 


的 AP1， 把 看 起 来 平淡 无 奇 的 框架 特性 运 


， 什 么 时 候 用 ， 什 么 时 候 不 
发 容易 维护 的 Angular 程 序 ? 请 看 第 4 章 。 


得 出 神 入 化 ， 第 5 章 将 集中 


在 前 面 的 章节 中 零 零散 散 提 到 了 一 些 需要 注意 的 地 方 ， 但 是 这 样 不 方便 查阅 ， 所 以 我 们 把 需要 注意 的 地 方 作为 独立 的 一 大 章 ， 把 我 们 帮 别 人 解决 过 的 一 些 典型 问题 收集 在 一 起 。 当 然 ， 我 们 也 会 在 读者 


区 继续 维护 并 更 新 这 些 “ 坑 ”， 而 不 是 等 再 版 时 才 发 布 。 我 们 希望 能 把 这 本 书 做 成 “ 活 的 ” 


， 让 这 本 书 更 加 物 超 所 值 ， 不 境 负 读者 对 我 们 的 信任 。 


工具 
工 和 欲 善 其 事 ， 必 先 利 其 器 。 充 分 发 挥 工具 
更 多 


在 实战 中 ， 有 很 多 需求 是 不 显眼 但 很 重要 的 ， 


的 力量 是 开发 人 员 的 重要 素质 ， 日 常 


到 的 工 


你 真 的 


比如 SEO、 访 问 统计 等 ， 在 实际 项 


Hybrid 应 


法 和 框架 。 


附录 


软件 开发 需要 很 多 综合 技能 ， 但 本 书 容量 有 限 ， 我 们 也 不 可 能 是 每 个 领域 的 专家 。 


和 手机 Web 越 来 越 普 及 ， 手 机 版 


发 的 需求 也 越 来 越 高 ， 在 Angular 


关于 随 书 代码 


因此 ， 我 们 会 “ 授 人 以 渔 ”， 给 出 一 些 在 线 资源 和 书生 


熟练 了 吗 ? 有 没有 更 好 的 


础 上 ， 开 发 手机 版 变 得 容易 多 了 。 而 且 


书 中 所 摘录 的 只 是 全 部 代码 的 一 小 部 分 ， 大 部 分 代码 都 放 在 了 GitHub 上 。 地 址 是 https://github.com/ng-nice/code。 


工具 ? 我 们 会 把 实战 中 觉得 对 自己 帮助 最 大 的 工具 及 其 使 


1， 也 已 经 有 了 比较 成 熟 的 工 


经 验 分 享 给 你 。 


中 ， 这 些 往往 是 不 能 忽视 的 。 我 们 会 专门 通过 一 章 来 讲解 如 何 结合 Angular 和 第 三 方 软件 干净 漂亮 地 解决 这 些 问题 。 


和 框架 ， 我 们 会 简要 讲解 一 下 手机 版 开发 的 方 


和 E， 供 大 家 深入 学 习 或 作为 备查 资料 。 


如 果 你 查看 GitHub 历 史 ， 会 发 现 总 的 提交 数 并 不 多 。 这 是 因为 要 方便 教学 ， 所 以 在 提交 前 进行 了 合并 。 所 保留 的 这 些 提 交大 都 和 书 中 的 主要 进度 有 关 ， 略 去 了 细节 提交 。 所 以 ， 本 书 中 代码 的 提交 粒度 
不 能 代表 实际 项 目 中 的 提交 粒度 ， 在 实际 项 目 中 ， 其 提交 粒度 通常 比 本 书 中 所 示范 的 更 小 。 阅 读 代码 时 请 记 住 这 一 点 ， 以 免 养 成 “大 粒度 提交 ”的 坏 习惯 。 


另外 ， 文 中 的 Javascript 代 码 (包括 摘 引 的 Angular 源 码 ) 全 都 使 用 了 两 格 缩 进 模式 ， 这 主要 是 考虑 到 图 书 排版 问题 ， 希 望 少 一 些 不 必要 的 换行 。 你 们 在 现实 项 目 中 愿意 用 两 格 或 四 格 均 可 ， 只 要 项 目 组 
内 保持 一 致 即 可 。 


关于 内 容 的 重复 
仔细 阅读 ， 可 能 会 发 现 有 些 内 容 会 在 多 个 不 同 的 章节 中 重复 讲解 ， 这 当然 不 是 凑 字 数 ， 而 是 尽 可 能 符合 人 的 记忆 规律 一 一 把 重要 的 内 容 在 不 同 的 场景 下 重复 ， 对 于 深入 掌握 重点 是 很 有 帮助 的 。 
关于 写作 风格 


这 是 一 本 多 人 协作 的 书 ， 虽 然 我 们 进行 了 后 期 统 稿 ， 但 在 语言 风格 等 方面 仍 难免 会 有 不 一 致 的 地 方 ， 我 们 期 待 你 们 的 反馈 ， 以 便 将 来 改进 。 


你 的 好 ， 我 永远 记得 ! 


双 狼 的 感恩 


双 狼 的 本 次 合作 起 于 机 械 工业 出 版 社 编辑 吴 怡 的 邀请 。 作 为 ThoughtWorks 的 Tech Lead， 双 狼 都 有 很 多 工作 任务 ， 原 定 6 个 月 的 写 书 计划 ， 被 拖 到 了 8 个 月 ， 感 谢 吴 怡 的 耐心 与 推动 。 
还 有 很 多 ThoughtWorker 为 本 书 做 出 了 贡献 : 

“ 张 选 ， 资 深 ThoughtWorker， 很 多 技术 书籍 的 作者 或 译 者 。 一 直 在 鼓励 我 们 ， 并 给 了 我 们 很 多 帮助 。 

“ 彭 洪 伟 ， 本 书 的 第 三 作者 。 在 交 稿 压力 最 大 的 时 候 ， 承 担 了 “工具 ”篇 的 撰写 工作 ,保障 了 本 书 的 尽早 交 稿 。 


“ 陈 嘉 ， 幕 后 的 贡献 者， 全 栈 式 工程 师 。 帮 我 们 设计 了 “ 双 狼 说 ” 微 信 公众 号 的 Logo， 从 技术 的 角度 帮 我 们 审 稿 ， 并 提 了 一 些 非 常 有 用 的 建议 。 


还 有 很 多 ThoughtWorker 和 社区 朋友 帮助 我 们 从 技术 层面 和 语言 层面 进行 修改 。 他 们 有 的 是 Angular 专 家 ， 有 的 是 新 手 ， 给 了 我 们 比较 全 面 的 反馈 。 能 将 枯 爆 、 乏 味 的 技术 平易 近 人 地 展现 在 这 本 书 
中 ， 一 定 要 感谢 他 们 所 作出 的 奉献 。 他 们 是 (排名 不 分 先后 ) : 冯 和 尔 东 、 朱 本 威 、 李 科 伟 、 杨 琛 、 彭 瑰 、 叶 志 敏 、ng 群 as。 


还 要 感谢 Angular 中 文 社区 QQ 群 和 关注 “ 双 狼 说 ” 微 信号 的 网 友 们 ， 是 你 们 的 鼓励 给 了 我 们 写作 的 信心 和 动力 ! 


雪 狼 的 感恩 


开始 写 书 的 时 候 ， 刚 刚 认识 我 的 女友 娜 娜 ， 今 天 ， 我 们 即将 走 进 婚姻 的 殿堂 。 我 这 样 一 个 负 情 商 的 程序 员 ， 人 生活 有 多 么 枯 爆 乏味 ， 不 问 可 知 。 感 谢 你 点 亮 了 我 的 人 生 。 你 的 好 ， 我 永远 记得 ! 


能 专注 开发 17 年 ， 要 感谢 我 父母 和 弟弟 的 支持 。 人 到 中 年 ， 本 应 是 最 纠结 的 时 代 ， 特 别 是 我 这 样 的 前 “单身 狗 ”。 我 无 法 经 常 回 家 ， 是 弟弟 经 常 回去 探望 父母 。 父 母 的 乐观 与 健康 ， 让 我 可 以 心 无 旁 敬 
地 工作 。 你 们 的 好 ， 我 永远 记得 ! 


能 走 入 软件 开发 这 一 行 ， 要 感谢 我 的 伯乐 何 战 涛 和 王 勇 的 帮助 。 还 记得 那个 沉默 而 不 自信 的 “小 汪 ” 吗 ? 当初， 他 什么 也 不 会 ， 犯 过 很 多 错误 ; 如 今 ， 他 在 尽力 为 别人 的 职业 生涯 提供 帮助 。 你 们 的 
好 ， 我 永远 记得 ! 


在 这 17 年 间 ， 我 尝试 过 很 多 角色 ， 从 写 文档 、 测 试 到 小 公司 的 CTO， 走 过 了 丰富 多 彩 的 人 生 。 特 别 需 要 感 澳 的 是 林 先 生 和 余 姐 等 前 同事 ， 我 们 追随 林 先 生 走 过 8 年 创业 之 旅 ， 这 一 过 程 让 我 具备 了 更 
阔 的 视野 和 更 坚韧 的 性 格 。 虽 然 因 为 生活 压力 不 得 不 离开 ， 但 ， 你 们 的 好 ， 我 永远 记得 ! 


最 后 ， 感 澳 ThoughtWorks! 作为 “敏捷 "的 倡导 者 ，ThoughtWorks 处 处 体现 着 敏捷 思想 ， 这 是 一 个 把 “敏捷 ” 变 成 “文化 ”并 渗透 到 骨子里 的 公司 。 这 是 一 个 很 “ 奇 苑 ”的 公司 。 这 一 点 从 “全 球 
CEO 和 中 国 区 程序 员 撞 实 ”事件 就 可 见 一 班 。 这 是 一 个 很 “简单 ”的 公司 。 引 用 我 们 一 位 HR 的 说 法 ; “ 进 了 ThoughtWorks， 我 感觉 自己 的 情商 都 下 降 了 ! ”这 是 一 个 很 “技术 ”的 公司 。 每 年 两 期 的 技术 
雷达 都 来 自 全 球 近 3000 名 工程 师 的 实践 总 结 。 这 里 几乎 会 涉足 每 一 项 前 沿 技术 : 大 数据 、React、Scala 等 。 仅 以 Angular 为 例 ， 我 们 在 工程 实践 中 使 用 它 是 在 4 年 前 ， 那 时 候 Angular 还 是 0.6 版 呢 。 


还 差 一 句 话 就 变 成 招聘 软文 了 ， 索 性 补 上 吧 : ThoughtWorks， 你 的 好 ， 进 来 才 知 道 ! 


破 狼 的 感恩 


在 写作 本 书 之 际 ， 我 作为 ThoughtWorks 高 级 敏捷 咨询 师 、 架 构 师 ， 因 为 项 目 曾 回转 多 地 ,没有 太 多 时 间 投 入 到 这 次 的 写作 之 中 。 在 此 之 前 ,已 经 有 很 多 的 出 版 社 联系 我 写本 国人 自己 的 深度 解析 
Angular 的 书籍 ， 但 都 被 我 婉言 拒绝 了 。 直 到 雪 狼 告诉 我 他 希望 写 一 本 关于 Angular 的 书籍 的 时 候 ， 恰 巧 吴 怡 编辑 也 跟 我 提起 了 写 书 的 事 。 这 次 我 们 应 承 下 来 了 。 在 这 里 首先 感谢 吴 怡 的 知 遇 之 情 和 写 书 过 程 
之 中 的 包容 与 耐心 。 还 有 雪 狼 大 叔 的 最 终 推动 。 


我 是 一 个 具有 承诺 “强迫 症 ” 的 人 ， 一 旦 应 承 下 来 的 事情 ， 我 就 会 尽 自己 最 大 的 努力 把 它 做 好 。 特 别 在 快 截稿 的 几 个 月 里 ， 每 天 写作 到 凌晨 1~ 2 点， 次 日 还 需要 准备 与 客户 7 : 00 的 站 会 。 和 老婆 结婚 已 
经 一 年 多 了 ， 可 是 由 于 工作 原因 ， 我 也 出 差 在 外 一 年 多 了 。 加 上 写作 此 书 的 时 候 ， 连 陪伴 父母 和 老婆 的 时 间 也 被 我 挤 出 来 写作 本 书 了 。 所 以 在 此 ， 首 先 要 感谢 我 的 父母 和 老婆 ， 感 谢 你 们 的 支持 和 包容 ， 在 
这 本 书 的 背后 也 包含 着 你 们 对 我 的 一 份 宝贵 的 爱 。 爸 妈 、 老 婆 : 我 也 爱 你 们 ! 


还 要 感 澳 我 大 学 的 导师 刘 继 光 老师 和 柳 翠 寅 老师 ， 是 你 们 让 我 学 到 了 软件 开发 的 技能 。 以 及 帮 我 寻找 到 一 份 实 习 的 机 会 ， 给 了 我 比 别人 多 3 年 的 实战 机 会 ， 因 此 我 才能 独自 闯荡 成 都 这 座 大 城市 ， 并 开始 
了 软件 开发 之 路 。 还 有 你 们 对 知识 的 追求 和 坚强 的 毅力 ， 深 深 感染 了 我 。 至 此 坚持 了 6 年 多 的 博客 写作 和 回馈 开源 社区 ， 因 此 才 有 了 本 书 的 顺利 完成 。 你 们 是 我 一 辈子 的 良师益友 ， 谢 谢 你 们 的 付出 ! 


同时 还 要 感谢 我 在 ThoughtWorks 的 同事 们 。 是 我 的 Sponsor 张 逸 一 直 鼓励 我 写 书 ， 是 熊 节 每 年 的 阅读 数量 激励 我 更 加 坚定 地 持续 获取 更 多 的 知识 来 武装 自己 。 还 有 很 多 的 twer， 同 样 在 这 里 感谢 你 们 
长 久 以 来 对 我 的 帮助 和 鼓励 。 


我 常常 告诉 自己 : 要 么 读书 ， 要 么 旅行 ， 身 体 和 心灵 总 有 一 个 在 路 上 。 与 君 共勉。 


首先 ， 我 要 感谢 我 父母 ! 即使 是 在 家 境 最 困难 的 时 候 ， 他 们 也 时 时 刻 刻 鼓励 我 、 支 持 我 ， 让 我 能 坚持 走 自己 的 路 。 


我 第 一 次 接触 到 计算 机 是 在 2003 年 。 那 时 网上 初中 ， 正 是 CS 和 传奇 火爆 的 时 候 ， 想 自己 申请 一 个 QQ 号 都 感觉 很 困难 。 直 到 2006 年 初中 毕业 ， 莫 名 其 妙 地 开始 了 信息 学 奥林匹克 竞赛 的 培训 之 路 ， 用 C 
语言 写 出 了 人 生 的 第 一 行 Hello World 代 码 。 


感谢 张 宗 飞 老 师 的 悉心 教导 和 高 中 三 年 对 C 语 言 、 算 法 、 图 论 、 数 论 的 培训 ， 还 记得 大 家 都 叫 您 小 女 〈 误 读 作 : Ge) 子 。 是 您 激发 了 我 的 “程序 员 梦 ”。 以 至 于 后 来 在 报 志愿 的 时 候 ， 第 一 志愿 写 的 都 
是 计算 机 信息 科学 与 技术 ， 虽 然 那 时 候 并 不 知道 这 个 专业 是 干什么 的 。 


在 大 学 里 ， 特 别 要 感谢 的 是 邓 芳 老师 ， 是 您 鼓励 我 们 ， 除 了 学 好 课堂 上 的 东西 ， 更 要 积极 去 探索 自己 感 兴趣 的 东西 。 您 “ 授 人 以 鱼 ， 不 如 授 人 以 渔 ”的 教学 思想 ， 让 我 逐渐 养 成 了 自学 的 习惯 ， 至 今 让 
我 受益 菲 浅 。 后 来 ， 您 帮 我 引荐 了 两 位 让 我 受益 良 多 的 导师 : 陈 宇 副教授 和 王 海 军 副教授 。 是 他 们 把 我 带 到 了 物 联网 的 领域 ， 让 我 对 计算 机 的 领域 产生 了 更 浓厚 的 兴趣 。 三 位 老师 的 指引 ， 让 我 接触 到 了 更 
多 课堂 上 没有 的 东西 ， 终 于 有 幸 加 入 ThoughtWorks 这 个 大 家 庭 中 。 


在 这 里 ， 我 认识 了 有 黑客 范 儿 的 马 伟 和 段子 手 Jojo ( 周 哲 武 ) ， 是 他 们 给 了 我 建设 性 的 意见 ， 让 我 感觉 到 了 ThoughtWorks 的 不 同 。 不 得 不 提 的 还 有 Jojo 帮 有 我 推荐 的 Sponsor 一 一 破 狼 ， 是 他 不 断 地 在 
开源 的 世界 里 给 我 指出 新 机 会 ， 鼓 励 我 大 胆 尝 试 。 不 然 我 也 不 能 坚持 翻译 完 Scala 构 建 工具 SBT: http://www.scala-sbt.org/0.13/tutorial/zh-cn/index.html 的 使 用 文档 。 如 果 没 有 破 狼 的 引荐 ， 我 也 不 会 
认识 前 端 牛 人 雪 狼 和 参与 本 书 的 编写 。 


最 后 ， 如 果 没 有 未 婚 妻 韩 盼 盼 的 爱 、 支 持 与 鼓励 ， 我 也 难以 完成 这 么 多 富有 挑战 性 的 工作 。 谢 谢 ， 我 爱 你 ! 


第 1 章 ”从 实战 开始 


Brooks 在 《人 月 神话 》 中 有 一 句 著名 的 论断 : “没有 银 弹 ”。Angular 也 不 例外 ， 事 实 上 ， 我 在 17 年 的 软件 开发 过 程 中 ， 还 从 没有 遇 到 过 可 称 为 “ 银 弹 ” 的 技术 。 任 何 一 个 成 功 的 项 目 都 需要 多 种 技术 
的 配合 ， 经 过 需求 、 设 计 、 编 码 、 测 试 、 项 目 组 织 等 过 程 来 进行 ， 任 何 一 方面 的 短 板 都 可 能 限制 整个 项 目的 成 就 。 本 书 不 可 能 面面俱到 ， 但 这 些 过 程 如 此 重要 ， 以 至 于 可 能 成 为 在 项 目 中 成 功 应 用 Angular 
的 绊脚石 。 因 此 我 们 先 从 实战 出 发 ， 通 过 一 个 简单 的 例子 讲解 这 些 过 程 。 


本 章 将 由 浅 入 深 地 讲解 从 环境 准备 、 需 求 分 析 与 迭代 计划 、 创 建 项 目 、 写 页 面 ， 到 对 登录 、 错 误 处 理 等 进行 面向 切面 编程 (AOP) 。 本 书 可 能 对 初学 者 有 一 定 难度 ， 建 议 初学 者 先 到 
ngnice (http:/www.ngnice.com/) 了 解 Angular 基 础 知识 。 


1.1 “环境 准备 


进行 开发 的 第 一 步 是 准备 开发 工具 。 对 于 用 惯 了 IDE 的 程序 员 来 说 ， 可 能 需要 适应 一 下 IDE 配 合 命令 行 的 模式 ， 不 过 最 终 你 会 爱 上 命令 行 模式 的 快速 和 简洁 。 


我 们 将 要 使 用 的 环境 如 下 。 


1.Node 


Node 全 称 是 Nodejs， 它 是 一 个 让 Javascript 访 问 各 种 本 地 API 和 网 络 API 的 运行 环境 ， 在 本 书 中 ， 将 大 量 使 用 基于 Node 的 模块 和 工具 。 


Node 的 安装 非常 简单 ， 如 果 你 使 用 Linux/Mac 操 作 系统 ， 建 议 从 https://github.comycreationix/nvm 下 载 ; 如 果 你 使 用 Windows 操 作 系 统 ， 建 议 从 Nodejs 官 网 下 载 : http://nodejs.org/。 


受 互联 网 等 因素 的 影响 ，Linux/Mac 版 的 安装 可 能 会 遇 到 | 问题， 如 果 使 用 过 程 中 遇 到 | 问题 ， 也 可 以 从 Nodejs 官 网 下 载 ， 但 是 要 用 这 种 安装 方式 将 迫使 你 使 用 root 权 限 ， 后 面 可 能 经 常 需要 输入 登录 密 
码 ， 从 此 以 后 ， 你 需要 root 权 限 才能 安装 某 些 第 三 方 Node 包 ， 相 应 的 ,npmhttp://www.hzcourse.com/resource/readBook? 
path=/openresources/teach _ ebook/uncompressed/15538/OEBPS/Text/... 命 令 也 要 改 为 sudo npmhttp://www.hzcourse.com/resource/readBook? 


path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/... 命 令 。 


局 


2.cnpm 


npm 是 Node 自 带 的 包 管 理 器 ， 它 的 中 心服 务 器 架设 在 国外 ， 受 到 互联 网 等 因素 的 影响 ， 有 时 下 载 速度 会 非常 慢 ， 甚 至 部 分 包 完全 无 法 下 载 。 我 们 可 以 使 用 阿里 在 国内 架设 的 CDN 来 解决 此 问题 。 阿 里 
的 CDN 提 供 了 一 个 独立 的 包 管理 命令 : cnpm installhttp://www.hzcourse.com/resource/readBook?path=/openresources/teach_ ebook/uncompressed/15538/OEBPS/Text/...， 不 过 在 使 用 它 之 前 
需要 先 安装 : npm install-g cnpm--registry=https://registry.npm.taobao.org。 今 后 所 有 需要 出 现 npm 命 令 的 地 方 ， 都 可 以 替换 为 cnpm 命 令 。 假 设 你 已 经 安装 过 cnpm 命 令 ， 所 以 本 书后 面 出 现 的 npm 


命令 也 会 蔡 换 为 cnpm 命 令 。 


3.Java 


Angular 的 前 端 开发 并 不 需要 使 用 Java， 但 是 Webstorm 等 IDE 是 基于 Java 开 发 的 ， 本 书 范例 中 的 后 端 服务 器 也 是 基于 Java 开 发 的 。 如 果 需 要 ， 可 以 
到 http://www.oracle.com/technetwork/java/javase/downloads/ 下 载 并 安装 Java。 


4.Intelli) 


本 书 中 将 使 用 IntelliJ 作 为 演示 用 IDE。 这 是 JetBrains 公 司 出 品 的 软件 ， 既 能 写 前 端 ， 也 能 写 后 端 ， 默 认 支 持 Java 语 言 和 前 端 技术 栈 ， 也 可 以 通过 插件 支持 更 多 种 语言 。 它 还 有 一 个 专门 面向 前 端 开 发 的 
精简 版 本 ， 叫 作 WebStorm。 它 的 安装 方式 都 有 官方 说 明 ， 在 此 不 再 详 述 。 


JetBrains 的 软件 是 收费 的 ， 不 过 它 带 来 的 便利 确实 值得 你 投资 。 此 外 ，Eclipse 和 Visual Studio 也 都 是 不 错 的 选择 。 


5.IntelljJ 的 AngularJSs 揪 件 


IntelliJ 的 AngularJS 揪 件 是 个 非常 实用 的 插件 。 它 可 以 帮 你 检查 模板 中 使 用 的 官方 指令 和 自 定义 指令 的 语法 ， 并 且 支 持 按 组 合 键 Ctrl+B (Windows 系 统 ) /Cmd-B (Mact 系 统 ) 进行 跳 转 。 


6.Git 


本 书 的 源码 将 全 部 通过 Git 发 布 在 GitHub 上 ， 所 以 ， 你 有 必要 安装 一 个 Git 工 具 。 而 且 ，Git 的 作用 远 不 止 于 管理 本 书 的 源码 ， 在 做 其 他 开发 的 过 程 中 也 很 有 用 ， 甚 至 本 书 的 写作 稿 也 是 通过 Git 来 协调 多 
位 作者 和 编辑 之 间 的 合作 的 。 


lL2 


录 的 code 子 目录 下 ， 和 县 


对 于 Linux 系 统 ， 主 流 的 版 本 都 可 以 使 有 
git; 而 Windows 下 比较 特殊 ， 由 了 


7.cygwin 


Windows 不 是 前 端 开发 的 理想 环境 ， 如 果 有 条 件 ， 最 好 使 


不 过 ， 最 好 的 方式 是 


8. 开 发 指南 与 API 


由 于 受 互 联网 等 因素 的 影响 ， 部 分 


VirtualBox 装 一 个 Linux 虚 拟 机 ， 在 虚拟 机 中 进行 这 些 尝试 。 


需求 分 析 与 迭代 计划 


兰 


本 案例 是 一 个 教学 项 目 ， 它 是 一 个 小 型 的 系统 ， 其 目标 是 作为 本 书 的 读者 交流 区 ， 你 将 看 到 它 如 何 从 简陋 走向 完善 。 


它 完全 开源 ， 有 兴趣 的 读者 也 可 以 实际 参与 到 它 的 功能 扩 


完整 的 代码 会 作为 一 个 开源 项 目 托管 在 GitHub 上 : https://github.com/ng-nice/code。 想 要 获取 源码 ， 请 执行 命令 : git clone git@github.com: ng-nice/code.git， 它 会 把 项 
有 面 会 有 README.md 文 件 指引 你 如 何 运 行 本 项 目 ， 以 及 如 何 参 与 开发 。 


1. 系 统 隐 喻 


作为 项 目的 第 一 步 ， 我 们 会 建立 一 个 “系统 隐喻 ”， 也 就 是 描述 一 下 我 们 的 系统 类 似 于 哪些 现 有 系统 ， 从 而 让 项 目 组 成 员 更 形象 地 记 住 目标 ， 也 让 客 
统 ， 描 述 系统 隐喻 时 要 重点 描述 其 与 现 有 系统 的 不 同 点 。 


系统 隐喻 : 一 个 迷你 的 论坛 系统 ， 


2. 业 务 目标 


展 中 。 显 然 ， 如 果 我 把 代码 都 粘贴 到 本 书 中 ， 编 辑 大 人 会 跟 我 拼命 的 。 所 以 我 在 本 书 中 只 摘录 并 讲解 其 中 适合 


侧重 交流 而 不 是 宣传 。 与 传统 论坛 /留言 板 系统 相 比 ， 本 系统 更 加 重视 对 读者 


馈 意 见 的 收集 和 自动 化 分 析 。 


其 内 置 的 包 管 理 器 来 安装 ， 比 如 Ubuntu 下 的 sudo apt-get install git; 对 于 Mac 系 统 ，Xcode 内 置 了 Git， 也 可 以 通过 brew 工 具 安 装 最 新 版 ， 如 : brew install 
FGit 没 有 原生 的 Windows 编 译 版 本 ， 所 以 需要 下 载 一 个 第 三 方 版 本 https://msysgit.github.io/。 


Linux 或 Mac。 如 果 确 实 要 在 Windows 下 操作 ， 那 么 请 先 安装 cygwin。cygwin 是 个 在 Windows 下 面 的 Linux 命 令 模拟 器 。 本 书 中 列 出 的 绝 
大 多 数 命令 都 需要 在 cygwin 下 执行 。 当 然 ， 如 果 你 熟悉 Linux 命 令 和 Windows 命 令 的 对 应 关系 ， 也 可 以 在 Windows 的 CMD 窗 口中 开发 。 


户 可 能 无 法 正常 访问 官方 网 站 (angularjs.org) ， 也 就 无 法 正常 查阅 开发 指南 和 AP1， 这 将 成 为 学 习 Angular 的 障碍 。 为 了 解决 此 问题 ， 我 们 在 国内 架设 了 一 个 网 
站 : www.ngnice.com， 这 里 有 我 们 组 织 翻 译 的 开发 指南 (guide) 以 及 API 的 英文 版 。 


来 示范 技术 的 功能 。 


源码 下 载 到 当前 


户 更 容易 理解 目标 。 当 然 ， 世 上 没有 完全 相同 的 系 


系统 隐喻 过 于 粗略 ， 接 下 来 我 们 要 定义 一 个 业务 目标 ， 这 是 一 个 更 明确 的 功能 列表 。 但 是 ， 要 注意 ， 业 务 目 标 不 仅仅 包含 “要 做 什么 ”， 而 且 要 包含 “不 做 什么 ”。 软 件 开发 中 有 一 个 大 敌 ， 叫 作 “ 需 


求 蔓延 ”。 在 这 个 阶段 定义 “不 做 什么 ”就 是 为 了 防范 


要 做 什么 
(1) 非 功 能 需求 。 
“ 每 个 系统 只 支持 一 本 书 。 


“ 支持 多 个 作者 (包括 志愿 者 ) 


， 数 量 预 估 在 10 人 以 下 ， 不 会 超过 百人 。 


“ 支持 多 个 读者 ， 数 量 预 估 在 千 人 左右 ， 不 会 超过 一 万 人 。 


“ 防范 XSS 等 常见 前 端 攻击 。 


* 防范 SQL 注入 、DDoS 等 后 端 攻击 。 


“ 使 用 公认 安全 的 后 端 权限 框架 ， 以 免 出 现 典型 安全 问题 。 


“ 面向 读者 的 功能 需求 。 


“ 允许 读者 注册 。 


. 刀 许 读者 登录 。 


“ 不 允许 匿名 发 帖 或 +1。 


“对 主题 进行 树 状 显示 。 


“ 读者 可 以 发 布 勘误 ， 作 者 可 以 


接受 “勘误 ”， 或 标 为 “重复 ”。 


“ 读者 可 以 发 布 问 题 ， 作 者 可 以 答复 问题 。 


“ 读者 可 以 发 布 建议 ， 作 者 可 以 


接受 “建议 ”， 或 标 为 “重复 ”。 


“ 其 他 读者 可 以 对 问题 或 建议 进行 +1 操 作 ， 提 升 作者 的 关注 度 。 


“ 读者 可 以 通过 第 三 方 搜索 引擎 


搜索 。 


“ 系统 可 以 自动 整理 FAQ， 供 读者 阅读 。 


(2) 面向 作者 的 功能 需求 : 


“ 作者 可 以 答复 问题 。 


“ 作者 可 以 删除 不 当主 题 。 这 里 的 删除 不 是 真正 的 删除 ， 作 者 仍然 可 以 看 到 并 恢复 。 


“ 作者 可 以 发 布 “读者 调查 ”。 


.作者 可 以 对 特定 主题 进行 高 亮 显示 。 


“ 系统 会 自动 从 内 容 中 提取 一 批 关 键 字 ， 同 时 作者 也 可 以 手动 为 文章 设置 一 批 关键 字 。 


“ 作者 可 以 进行 数据 库 搜索 ， 不 做 限制 。 


“ 支持 上 传 图 片 和 附件 ， 图 片 和 附件 最 大 不 超过 10MB。 


“ 支持 提交 代码 和 显 式 : HTML/CSS/JavaScript/Java， 不 需要 支持 其 他 语言 。 


“ 作者 可 以 统计 出 所 有 提供 过 建议 、 勘 误 的 读者 ， 将 名 字 列 入 下 一 版 中 的 “贡献 名 单 ”。 


“ 出 于 安全 原因 ， 读 者 上 传 的 非 图 片 类 附件 需要 作者 审核 后 才能 显 


不 做 什么 


“ 不 做 多 级 权限 ， 只 区 分 作者 和 读者 。 


“ 不 支持 手动 配置 权限 ， 硬 编码 权限 对 应 的 操作 。 


“ 不 支持 读者 进行 数据 库 搜索 ， 但 对 读者 的 搜索 关键 字 进 行 统计 。 


“ 出 于 版 权 原 因 ， 不 支持 QQ 等 表情 包 ， 只 支持 普通 的 符号 表情 。 


“ 默认 读者 是 善意 的 ， 不 对 内 容 进 行 预先 过 滤 ， 只 支持 事后 删除 。 


“ 不 做 专门 的 回收 站 ， 而 是 让 作者 就 地 删除 和 恢复 。 


“ 不 做 全 面 的 视觉 美化 ， 但 注重 “操作 友好 性 ”。 


3 需求 分 析 


在 真正 的 项 目 组 中 ， 会 有 一 个 集体 估算 “功能 点 /复杂 度 ”的 过 程 ， 但 是 作为 单 人 开发 者 ， 就 只 好 “独裁 ”了 。 


不 过 ， 比 估算 “功能 点 /复杂 度 ”的 具体 数量 更 重要 的 是 拆 分 任务 、 估 算 风 险 ， 并 最 终 决定 优先 级 。 在 排 定 优先 级 之 后 ， 我 们 可 以 把 整个 项 目 划分 成 多 个 阶段 ， 每 个 阶段 都 可 以 发 布 可 用 的 产品 版 本 ， 这 
将 带 来 多 方面 的 好 处 : 


产品 可 以 尽早 推出 ， 尽 早 获得 回报 。 


“ 可 以 尽早 为 客户 方 建立 信心 ， 而 获得 客户 方 的 信任 ， 这 对 软件 项 目的 成 功 至 关 重要 。 


“ 可 以 尽早 发 现 并 控制 风险 。 


“ 可 以 给 项 目 组 成 员 一 段 休养 时 间 ， 防 止 疫 劳 作战 。 


“ 可 以 留 出 一 些 重 构 和 回顾 的 时 间 ， 抽 取 复 用 模块 。 


我 们 将 这 些 “ 阶 段 ” 称 为 “基线 ” (Baseline) 。 它 的 英文 原 词 非常 形象 : 多 个 项 目 阶段 就 像 是 一 个 


们 就 可 以 对 各 期 的 目标 进行 隔离 ， 即 使 下 一 期 目标 达 不 到 ， 我 们 也 随时 有 一 个 可 用 的 版 本 。 


度 、 


这 种 交付 方式 称 为 “和 代 式 开 发 ”， 更 形象 的 说 法 叫 作 “ 小 步 快 跑 ”。 


基线 的 粒度 取决 于 所 用 的 开发 方式 ， 对 于 敏捷 开发 ， 通 常 基 线 会 划分 到 一 周 左右 的 


风险 、 工 作 量 、 优 先 级 等 几 项 ， 建 议 用 五 级 评估 。 其 中 : 


价值 是 指 此 项 功能 对 业务 的 重要 性 。 这 往往 来 自 产品 经 理 或 客户 代表 。 对 于 敏捷 团 


值 。 


的 第 三 方 系统 对 接 ， 它 就 会 


一 
里 。 


随 着 业务 的 发 展 ， 这 些 业务 价值 也 会 相应 变化 。 


难度 是 指 根据 项 目 组 现 有 技术 积累 评估 出 的 难 易 程度 。 比 如 “能 处 理 每 秒 十 万 人 同时 下 订单 ”对 当前 团 


队 来 说 可 能 难度 较 大 。 难 度 主要 决定 人 员 分 工 ， 特 别 是 人 员 人 能力。 


个 台阶 ， 每 完成 一 个 阶段 ， 我 们 就 迈 上 一 个 台阶 ， 站 在 一 个 稳固 的 基础 (Base) 上 。 有 了 基线 , 我 


粒度 ， 即 使 是 传统 开发 方式 ， 也 可 以 向 这 个 方向 努力 。 基 线 的 内 在 形式 是 一 个 表格 ,通常 包括 编号 、 名 称 、 价 值 、 难 


队 ， 还 要 让 全 体 成 员 理 解 它 的 业务 价值 。 要 注意 ， 业 务 价值 是 有 时 效 性 的 ， 当 前 阶段 迫切 需要 的 功能 会 有 更 高 的 价 


风险 是 指 不 确定 性 。 比 如 ， 假 设 我 从 来 没 集成 过 富 文本 编辑 器 ， 那 么 虽然 我 明知 它 应 该 很 容易 ， 但 仍然 是 一 个 较 高 的 风险 。 我 可 能 评估 难度 为 1， 风 险 为 3。 再 比如 ， 我 们 的 某 项 功能 要 和 一 个 不 够 成 熟 


工作 量 是 指 在 一 切 顺 利 的 情况 下 需要 的 时 间 。 比 如 有 些 系统 对 视觉 效果 的 要 求 非常 严格 ， 那 么 它 虽 然 既 没 有 难度 ， 也 没有 风险 ， 但 是 具有 很 高 的 工作 量 。 工 作 量 往往 影响 人 员 的 


有 很 高 的 风险 ， 可 能 评估 难度 为 3， 风 险 为 5。 风 险 决定 项 目 安排 ， 高 风险 的 任务 往往 需要 先 开展 SPIKE (技术 预 研 ) ， 或 者 提前 安排 资源 保障 或 制定 备 


优先 级 是 前 面 几 项 的 综合 。 一 般 来 讲 ， 排 定 优先 级 的 依据 是 “性 价 比 ”， 这 里 的 “性 ”是 指 业 务 价值 ， 


方案 。 


分 工 ， 特 别 是 人 员 数 


“ 价 ” 则 根据 难度 、 风 险 、 工 作 量 进行 综合 评定 ;如果 时 间 紧 迫 ， 那 么 高 风险 的 项 目 会 被 安排 较 


低 的 优先 级 ， 也 就 是 尽量 推 到 后 面 的 版 本 中 实现 ; 另 一 方面 ， 如 果 一 项 工作 不 完成 ， 后 续 的 功能 就 无 法 实现 ， 它 也 需要 较 高 的 优先 级 ， 比 如 读者 注册 。 这 通常 由 项 目 经 理 最 终 决 定 ， 敏 捷 团 队 中 则 往往 由 客 


中 。 


或 二 


户 方 和 开发 方 共同 商定 。 


和 外 在 条 件 ， 没 有 统一 的 规定 。 只 要 让 每 个 人 随时 都 清楚 


项 目 管理 中 有 一 个 误区 ， 就 是 把 本 来 不 是 很 紧迫 的 任务 故意 排 得 4 


当然 ， 上 面 这 几 项 也 不 是 必须 全 都 列 出 和 准确 估 值 的 ， 可 以 根据 不 同 的 项 目 进行 定制 ， 比 如 团 
F 脆 叫 “ 点 ”。 


恨 紧迫 ， 希 望 以 此 来 提高 开发 人 员 的 “效率 ”， 但 是 这 往往 适得其反 一 一 高 收益 高 风险 的 需求 会 被 缺乏 安全 感 的 项 目 组 推 到 后 续 版 本 


队 沟 通顺 畅 ， 或 组 里 都 是 能 力 比较 强 的 成 员 ， 那 么 难度 、 风 险 、 工 作 量 可 以 打包 评估 成 一 个 “复杂 度 ” 项 


基线 的 外 在 形式 则 比较 多 样 ， 既 可 能 是 一 个 Word 文 档 ， 也 可 能 是 一 个 HTML 或 Markdown 文 件 ， 在 敏捷 开发 中 ， 则 常常 表现 为 一 组 故事 卡 (Story card) 。 至 于 采用 哪 种 形式 ， 取 决 于 项 目的 组 织 架构 


需求 评估 表 见 表 1-1。 


自己 的 目标 就 可 以 了 。 比 如 我 在 个 人 开发 中 就 把 这 些 任务 加 到 Evernote 中 ， 并 且 加 上 复 选 框 ， 完 成 一 项 勾 选 一 项 ， 任 务 和 进 


展 一 目 了 然 。 


表 1-1 需求 评估 表 


rm 


a 认证 与 权限 体系 (Spring 
security) 


i 
网 A 作者 可 加 回回 玫 | 
™ Re ns 加 大 回 到 于 早期 可 以 作为 普通 问题 发 布 
全 lee er rel 回回 加 EE 早期 可 以 作为 普通 问题 发 布 


其 他 读者 可 以 对 问题 或 建议 
70. | 进行 +1 操作 ,提升 作者 的 关 | 5 2 2 5 
注 度 
记 读者 可 以 通过 第 三 方 搜索 引 , 早期 数据 量 小 ， 没 必要 提供 
”| 擎 搜索 读者 的 高 级 搜索 功能 
本 系统 可 以 自动 整理 FAQ, 供 算法 较 复 杂 ， 早 期 数据 量 
读者 阅读 小 ， 没 必要 整理 


作者 可 以 答复 问题 


作者 可 以 删除 不 当主 题 ， 作 
者 仍然 可 以 看 到 并 恢复 


[> 


UI 和 模型 较 复 杂 ， 早 期 可 以 
作者 可 以 发 布 “读者 调查 ” 使 用 金 数 据 等 第 三 方 工具 进行 
调查 

作者 可 以 对 特定 主题 进行 
高 亮 显示 


作者 可 以 设 定 关键 字 ， 系 统 
自动 对 内 容 设 定 关键 字 


访问 量 可 控 ， 不 用 考虑 性 能 
问题 ， 此 功能 可 为 其 他 操作 提 
供 数据 

自己 实现 容易 被 攻击 ,使 用 
第 三 方 服务 需要 考虑 成 本 和 和 集 
成 风险 

支持 提交 代码 和 显示 代码 : 使 用 第 三 方 库 ， 曾 经 在 其 他 
HTML/CSS/JavaScript/Java 项 目 实现 过 

作者 可 以 统计 出 所 有 提供 过 成 熟 技术 ， 有 一 些 显示 方面 
建议 、 勘 误 的 读者 的 工作 量 


作者 可 以 进行 数据 库 搜索 ， 
不 做 限制 


支持 上 传 图 片 和 附件 ， 图 睛 
和 附件 最 大 不 超过 10MB 


在 列 出 需求 评估 表 之 后 ， 可 以 做 出 一 个 简要 的 项 目 基线 了 。 


原则 上 ， 我 们 把 优先 级 为 5 的 需求 划 为 第 一 条 基线 ， 部 分 优先 级 为 4 的 需求 也 可 以 划 为 第 一 条 基线 。 其 他 需求 则 留待 未 来 实现 ， 但 不 用 提前 决定 它们 到 底 属于 二 期 还 是 三 期 。 


于 是 我 们 得 出 了 第 一 条 基线 ， 见 表 1-2。 


表 1-2 第 一 条 
编号 名 称 站 风险 | 工作 量 | 优先 级 备注 
10. 读者 可 以 注册 2 5 
加 认证 与 权限 体系 ( Spring 证 人 
security) 
30. 对 主题 进行 树 状 显示 1 2 5 
读者 可 以 发 布 问题 ， 作 者 可 
40. 以 答复 问题 1 2 5 
读者 可 以 发 布 勘误 ,作者 时 期 可 以 作为 普通 | 
50. 可 以 接受 “勘误 ”， 或 标 为 1 2 4 期 可 以 作为 普通 问题 
“重复 ” 发 布 
其 他 读者 可 机 问题 或 建议 
70. 进行 +1 操作 ， 提 升 作 者 的 关 1 p 5 
注 度 
100. 作者 可 以 答复 问题 2 pe 5 
作者 可 以 删除 不 当主 题 ， 作 
pp 
110，| 者 仍然 可 以 看 到 并 恢复 
老 末 以 对 昧 定 主 题 渤 行 言 
Fe, 作者 可 以 对 特 汪 主题 进行 表 i 
亮 显示 
ee 访问 量 可 控 ， 不 用 考虑 
者 可 以 进行 数据 库 搜索 ， NE WA 
150. py 以 进行 数据 库 搜 2 2 4 “| 性 能 问题 ， 此 功能 可 为 其 
Ei 他 操作 提供 数据 
( 续 ) 
编号 备注 
i 支持 提交 代码 和 显示 代码 : 使 用 第 三 方 库 ， 曾 经 在 
”| HTML/CSS/JavaScript/Java 其 他 项 目 实 现 过 
180 作者 可 以 统计 出 所 有 提供 过 成 熟 技术 ， 有 一 些 显示 
”| 建议 、 勘 误 的 读者 方面 的 工作 量 
4. 定 义 导 航 图 
需求 分 析 完 毕 ， 我 们 需要 定义 一 下 导航 图 (Site map) 。 导 航 图 主要 用 来 体现 页 面 之 间 的 跳 转 关系 。 定 义 完 导航 图 ， 就 可 以 大 致 了 解 整个 网 站 有 多 少 个 页 面 ， 以 及 各 个 页 面 的 大 体 复 杂 度 。 


导航 图 可 以 有 多 种 形式 。 如 果 需 要 演示 给 客户 或 者 老板 ， 那 么 可 以 安装 一 个 FreeMind 软 件 来 制作 脑 图 。 
Sketch (Mac 版 的 收费 软件 ) 等 软件 制作 线 框图 。 


如 果 只 是 


作 开 发 组 内 部 交流 ， 那 么 可 以 直接 画 在 或 贴 在 白 


团队 沟通 环境 不 那么 顺畅 ， 那 么 也 可 以 直接 写成 Markdown 文 件 ， 并 纳入 版 本 管理 。 


我 们 先 制作 一 个 Markdown 格 式 的 导航 图 。 


1. 首 页 


1. 发 布 问题 


1. 发 布 勘误 


1. 帖 子 〈 问 题 /勘误 ) 列表 / 树 


1.+1 按 钮 


1. 帖 子 详情 


1. 删 除 按钮 


1. 高 亮 按钮 


( 限 作者 ) 


( 限 作者 ) 


这 个 软件 是 开源 的 ， 并 且 支 持 各 主流 操作 系统 。 如 果 要 更 高 级 的 效果 ， 也 可 以 使 
板 上 ， 让 每 个 人 一 抬头 就 能 看 到 ， 这 是 敏捷 开发 中 常 


的 方式 。 如 果 涉 及 远程 协作 开发 ， 或 者 


1 搜索 框 ( 限 作者 ) 
1. 统 计 ( 限 作者 ) 


1. 帖 子 详情 ( 含 主 贴 、 跟 帖 ) 


1. 回 复 


1.+1 按 钮 


1 删除 本 帖 ( 限 作者 ) 


1. 高 亮 本 帖 〈 限 作者 ) 


可 以 看 到 ， 从 导航 结构 来 讲 ， 一 期 需求 是 非常 简单 的 。 这 也 是 很 多 项 目的 常态 ， 通 过 第 一 期 的 成 功 来 树立 开发 方 和 客 
的 表现 。 


如 果 第 一 期 的 需求 很 复杂 ， 就 要 提高 警惕 了 ， 这 可 能 是 项 目 管理 不 良 或 客户 沟通 不 顺畅 的 信号 。 除 此 之 外 ， 一 期 需求 过 于 复杂 还 容易 导致 过 度 设计 ， 引 入 不 必要 的 复杂 性 ， 给 将 来 的 重 构 工 作 带 来 困 


扰 。 


可 以 看 出 ， 导 航 图 中 有 一 些 项 其 实 指向 同一 功能 ， 但 是 我 们 不 用 在 这 里 消除 重复 ， 做 导航 图 的 目的 是 更 直观 地 了 解 系统 概 狐 ， 我 们 会 在 后 面 的 阶段 中 消除 这 些 引 


5. 第 一 个 迭代 


定义 完 一 期 需求 ， 我 们 就 要 开始 制订 项 目 计划 了 。 通 过 几 次 迭代 方式 来 进行 : 


户 方 的 信心 ， 后 面 的 开发 就 会 顺利 很 多 。 这 也 是 你 凭借 自己 的 专业 性 来 对 客户 负 


0i 


复 。 


出 


我 们 不 需要 制订 一 个 庞大 的 计划 ， 只 需要 划分 出 第 一 个 迭代 的 任务 就 可 以 了 。 通 常 ， 每 个 迭代 都 不 应 该 超过 当前 项 目 组 一 周 的 工作 量 。 注 意 ， 必 须根 据 “ 当 前 ”项 目 组 的 能 力 进行 估算 。 对 于 相互 之 间 


还 不 太 了 解 的 项 目 组 ， 宁 可 使 用 比较 保守 的 估计 。 确 保 第 一 个 迭代 的 成 功 无 论 在 维护 士气 还 是 客户 关系 上 都 非常 重要 。 


把 哪些 功能 放 进 第 一 个 迭代 也 很 有 讲究 。 划 分 方式 有 纵向 划分 和 横向 划分 两 种 。 


纵向 划分 方式 是 一 个 功能 一 个 功能 完成 ， 每 开发 一 个 功能 就 把 它 完 全 实现 ， 做 完 的 功能 从 数据 库 到 用 户 体验 都 基本 达到 发 布 级 质量 。 这 种 方式 下 ， 通 常会 把 “被 依赖 ”的 功能 安排 在 前 面 ， 比 如 用 户 注 


册 、 登 录 等 。 


这 种 方式 的 优点 是 只 做 已 经 明确 的 需求 ， 减 少 无 用 功 。 进 展 到 一 定 阶 段 后 随时 可 以 对 外 发 布 版 本 。 这 是 最 简单 明了 的 方式 ， 可 能 也 是 很 多 人 正在 实际 使 用 的 方式 ， 不 


展开 讲 。 


横向 划分 方式 是 先 搭 一 个 粗糙 的 骨架 (会 走 的 贷 屿 ) ， 它 难看 、 缺 少 细节 (如 数据 有 效 性 校 验 ) ， 但 是 能 在 第 一 时 间 把 大 部 分 流程 串 起 来 ， 甚 至 可 以 在 第 一 个 迭代 进行 中 就 邀请 用 户 参 与 。 在 这 个 阶段 
中 ，UX (用 户 体验 设计 师 ) 、BA (业务 分 析 师 ) 等 可 以 并 行 工作 : 做 样板 页 、 细 化 用 户 故 事 。 一 部 分 没有 任务 的 研发 也 可 以 同步 进行 SPIKE (技术 预 研 ) 工作 。 


这 种 方式 适用 于 对 需求 和 业务 知识 还 不 太 熟悉 的 开发 团队 ， 也 适用 于 客户 方 的 需求 本 身 就 不 够 明确 的 情况 ， 基 本 上 符合 从 原型 演化 到 正式 系统 的 节奏 。 对 于 配合 默契 的 


化 ”的 特点 可 以 大 幅度 提高 研发 进度 。 


从 表面 上 看 ， 横 向 划分 方式 有 点 像 瀑布 模型 ， 但 其 实 并 非 如 此 。 横 向 划分 方式 不 是 用 文档 去 记载 需求 ， 而 是 用 代码 去 ; 


演示 需求 ， 并 且 在 尽 可 能 


如 果 和 客户 沟通 比较 顺畅 ， 那 么 很 多 表面 看 来 应 该 放 在 第 一 期 的 需求 可 能 会 被 推 到 第 二 期 甚至 砍 掉 ， 这 样 有 助 于 控制 需求 的 范围 


掉 也 没什么 可 惜 的 。 
当然 ， 在 现实 项 目 中 ， 这 两 种 方式 往往 是 穿插 进行 的 。 


“ 第 一 个 迭代 先 做 一 个 “会 走 的 嵩 咀 ”， 然 后 和 客户 沟通 ， 同 时 UX 并 行 设计 样板 页 ，BA 并 行 写 用 户 故事 的 细节 。 


的 时 间 点 上 把 最 终 使 


成 熟 团队 ， 这 种 方式 “高 度 并 行 


者 引入 开发 过 程 中 。 


。 同 时 ， 由 于 其 “粗糙 ”的 特点 ， 其 开发 代价 非常 小 ， 就 算 写 出 来 再 砍 


“ 从 第 二 个 迭代 开始 ， 把 客户 认为 最 紧 连 的 页 面 实 现 到 发 布 级 质量 ， 提 交 测试 。 端 到 端的 “场景 测试 ”也 可 以 开始 根据 上 个 迭代 完成 的 “会 走 的 髓 性 ”来 写 了 ， 但 只 需要 先 保障 “乐观 流程 ” (Happy 


path) 的 正确 性 。 


“ 从 第 三 个 迭代 开始 ， 就 可 以 针对 已 经 完成 的 用 户 故事 写 场景 测试 和 进行 用 户 化 测试 了 。 


就 本 书 而 言 ， 由 于 需求 简单 而 明确 ， 所 以 就 直接 采用 纵向 划分 方式 了 ， 而 且 这 种 方式 也 有 利于 教学 。 但 这 并 不 表示 纵向 划分 优 于 横向 划分 ， 而 是 它 更 适合 于 当前 场景 。 


作为 第 一 个 迭代 ， 我 们 划 定 的 范围 是 : 


10. 注 册 
20. 登 录 (认证 与 权限 体系 ) 
30. 主 题 树 


当然 ， 这 排 不 满 一 周 的 工作 量 ， 但 是 由 于 还 要 穿插 写 书 工作 ， 因 此 也 是 一 个 比较 合理 的 划分 。 在 教学 上 ， 它 也 能 示范 


1.3 ”创建 项 目 


出 足够 多 的 Angular 特 性 。 


接 下 来 ， 我 们 要 新 建 一 个 项 目 。 传 统 的 方式 是 使 用 Yeoman 工 具 ， 它 是 基于 Node 的 一 个 项 目 生成 器 引擎 ， 但 本 书 使 


的 是 Frontjet 方 式 ， 所 以 这 是 


讲 两 个 方式 。 


1.4 ”实现 第 一 个 页 面 : 注册 


接 下 来 ， 我 们 开始 实现 第 一 个 迭代 的 第 一 个 功能 : 10. 注 册 。 


我 们 把 能 够 通过 URL 独 立 访问 的 一 项 功能 简称 为 “一 个 路 由 ”， 


之 所 以 不 使 


ls 


15sl 


现 更 多 功能 : 


糙 


实现 主题 列表 


我 们 还 没有 实现 发 帖 和 取 帖 子 列表 的 后 端 功能 ， 甚 至 连 这 个 API 该 设计 成 什么 样 都 还 不 清楚 。 


了 ， 这 也 是 敏捷 方法 的 一 种 应 用 。 


我 们 先 做 些 准备 工作 。 在 routerjs 中 增加 两 个 路 由 定义 : 


这 里 为 注册 功能 分 配 一 个 叫 作 /reader/create 的 路 由 。 


/register 的 形式 ， 是 希望 在 各 个 URL 之 间 保 持 统一 ， 这 也 是 我 们 在 整个 项 目 中 将 贯穿 的 一 个 约定 。 


不 过 没关系 ， 我 们 可 以 先 在 前 端 做 一 些 模拟 数据 ， 等 到 前 端 所 需 的 数据 结构 确定 下 来 ，APl 也 就 基本 成 型 


$stateProvider.state('thread', { 


1); 


uel: /thread', 
template: '<div ui-view></div>', 
abstract: true 


$stateProvider.state('thread.list', { 


Ds 


Wel 


Aa 
templateUrl: 
controller: 


'controllers/thread/list.html', 
"ThreadListCtrl as vm' 


然后 创建 两 个 空 文件 : app/controllers/thread/list.js 和 app/controllers/thread/list.html。 


接 下 来 我 们 就 正式 开始 实现 。 


最 明显 ， 我 们 需要 几 个 字段 : 标题 (title) 、 发 帖 人 (poster) 、 发 帖 时 间 (dateCreated) 。 于 是 我 们 得 出 了 第 一 个 控制 器 : 


angular.module ('com.ngnice.app') .controller ('ThreadListCtrl', function ThreadListCtrl() { 


var wm = this; 
vm.items = [ 


title: ' 这 是 第 一 个 主 贴 '， 
poster: ' 雪 狼 ' 


dateCreated: "2015-02-1 9T00:00:00"' 


title: ' 这 是 第 二 个 主 贴 ， 含 有 字母 abcd 和 数字 1234'， 
Poster: ' 破 狼 '， 
datecreated: '2015-02-19T15:00:00" 
} 
]; 
for (var 1s 0 ix 10 二 fi 1{ 
Vm.items .Push ({ 
title: ' 主 题 ' + 工 
Poster: 'user' + i, 
dateCreated: '2015-02-18T15:00:00" 


和 第 一 个 模板 : 


<table class="table table-hover table-striped"> 


<thead> 

<tr> 
<th> 主 题 </th> 
<th> 作 者 </th> 
<th> 发 帖 时 间 </th> 

</tr> 

</thead> 

<tbody> 

<tr ng-repeat="item in wm.items"> 
<td>{{item.title}}</td> 
<td>{ {item.poster}}</td> 
<td>{ {item.dateCreated} }</td> 

</tr> 


</tbody> 
</table> 
这 里 起 主要 作用 的 是 我 们 的 老 朋 友 : ng-repeat 指 令 。 


现在 我 们 已 经 可 以 通过 在 地 址 栏 输入 http://localhost:5000/#/thread/list 来 预览 效果 了 。 


但 是 这 里 面 的 日 期 显示 的 仍然 是 ISO-8601 格 式 的 


(filter) ， 于 是 我 们 查阅 Angular 的 API 文 档 ， 发 现在 filter 分 类 下 有 一 个 date 过 滤器 ， 顾 名 思 义 ， 它 应 该 是 用 来 格式 化 日 期 的 ， 于 是 我 们 把 它 加 到 dateCreated 上 : {fitem.dateCreated|date}}。 


不 过 ， 预 览 的 时 候 我 们 发 现 它 被 格式 化 成 了 英文 格式 ， 对 中 文 


户 来 说 不 够 友好 ， 接 下 来 我 们 把 


它 改 成 可 读 性 更 好 些 的 格式 。 我 们 前 


HH 


提 到 过 ， 在 Angular 中 ， 负 责 对 数据 进行 格式 化 的 是 “过 滤 


来 说 太 不 友好 了 。 针 对 不 同 国 


家 、 语 种 的 


国 


际 化 ) 的 缩写 ， 


户 进行 特殊 处 理 的 工作 ， 叫 作 i18n， 它 是 internationalization ( 


因 


为 它 


中 间 正 好 有 18 个 字符 。 好 在 ，Angular 已 经 内 置 了 一 组 i18n 文 件 ， 中 文 简体 的 文件 名 叫 作 angular-locale_zh-cn.js。 我 们 把 它 从 github 的 Angular 项 目 中 下 载 下 来 ， 然 后 复制 到 app/libraries 目 录 里 就 可 以 


了 。 当 然 ， 放 到 app 的 其 他 
date 过 滤器 还 可 以 带 参数 ， 如 果 我 们 要 把 它 显示 成 “ 


如 果 


十 


户 友 好 性 ， 最 好 把 时 间 显 示 成 “刚才 ”、 “一 分 钟 前 ”、 


进一步 提高 


就 不 


1.6 


蓝 述 了 ， 你 可 以 


此 ， 实 现 路 由 页 


自己 尝试 实现 ， 还 可 以 借助 一 个 第 三 方 时 间 库 momentjs 来 降低 复杂 度 。 


实现 AOP 功 能 


“昨天 ”等 形式 。 这 种 情况 下 ， 我 们 可 以 


录 中 也 可 以 ， 不 过 我 们 的 约定 是 把 除 bower 之 外 的 第 三 方 库 都 放 到 app/libraries 目 录 下 ， 遵 循 这 个 约定 有 助 于 提高 程序 的 可 维护 性 。 


F- 月 -日 时 : 分 ”的 自 定义 格式 ， 那 么 就 要 这 么 写 : {{item.dateCreated: date: 'yyyy-MM-dd HH: mm'}}。 


面 时 


到 的 技术 我 们 已 经 基本 示范 过 了 ， 接 下 来 我 们 将 开始 实现 一 些 高 级 功能 。 


这 些 功能 具有 全 局 性 的 影响 


自 定义 一 个 新 的 过 滤器 ， 来 完成 转换 工作 。 由 于 这 个 过 滤器 不 涉及 新 的 知识 点 ， 


基本 上 每 个 路 由 都 会 涉及 它 ， 如 果 我 们 把 它 谋 入 到 每 个 路 由 的 实现 


里 
Ey 


那么 代码 中 将 出 现 大量 的 重复 ， 编 写 和 维护 将 会 变 成 疆 梦 。 这 类 功能 ， 我 们 称 其 为 “AOP 功 能 ”， 也 就 是 “面向 切面 功能 ” (形象 点 说 : 路 由 是 坚 着 并 列 在 一 起 的 ，AOP 功 能 则 像 一 个 平台 一 样 支撑 着 


它们 ) 。 最 典型 的 就 是 “登录 ”和 “错误 处 理 ”。 接 下 来 ， 我 们 先 来 实现 “登录 ”。 


级 的 


通过 本 章 的 学 习 ， 你 应 该 对 敏捷 方法 有 了 一 个 直观 的 概念 ， 如 果 想 要 深入 学 习 ， 建 议 阅读 《敏捷 软件 开发 》 等 书籍 。 


“ 工 欲 善 其 事 ， 必 先 利 其 器 ” ， 你 还 应 该 掌握 了 基本 的 前 端 工具 链 : Yeoman 或 FrontJet， 它 是 进行 前 端 开 发 的 基础 。 


接 下 来 ， 我 们 实现 了 第 一 个 表单 : 新 用 户 注册 页 面 。 在 这 里 ， 你 应 该 掌握 了 做 表单 、 使 用 校 验 规则 以 及 显示 错误 信息 的 技术 。 


后 面 的 小 节 中 ， 我 们 体会 了 内 置 指 令 的 威力 ， 你 应 该 对 这 些 内置 指 令 有 了 一 定 的 认识 ， 但 是 要 把 它们 用 到 极致 ， 还 需要 很 多 的 磨 练 ， 遇 到 需求 时 ， 请 先 想 一 想 如 何 用 内 置 指 令 实现 。 我 们 还 写 了 一 个 初 
自 定义 指令 ， 学 会 了 它 ， 就 能 对 页 面 结构 进行 模块 化 分 割 ， 并 且 在 必要 时 添加 一 些 依靠 内 置 指令 无 法 实现 的 功能 。 


接 下 来 ， 是 一 个 高 级 功能 ， 展 示 了 一 个 足以 让 你 进 阶 为 Angular 高 手 的 特性 : 递归 指令 。 充 分 理解 它 ， 将 对 你 的 学 习 很 有 帮助 但 是 如 果 还 不 怎么 理解 ， 也 不 用 担心 ， 只 要 学 会 用 我 写 好 的 这 个 指令 就 


可 以 了 ， 不 用 理解 其 原理 。 


中 。 


2.1 


现 ， 


最 后 ， 我 们 讲解 了 Angular 的 一 个 重要 特性 : interceptor (拦截 器 ) ， 它 可 以 在 与 服务 器 进行 交互 时 ， 处 理 很 多 公共 逻辑 ， 如 登录 、 错 误 显 示 等 。 这 样 可 以 防止 公共 逮 辑 分 散 到 控制 器 等 各 种 业务 代码 


同时 ， 别 忘 了 ， 我 们 还 用 单元 测试 贯穿 了 大 部 分 小 节 ， 这 些 没有 单独 列 为 一 节 不 是 因为 不 重要 ， 而 是 因为 太 重要 。 在 后 面 的 章节 中 ， 我 们 还 将 对 测试 进行 深入 讲解 。 


子 日 : 必 也 正名 乎 。 在 实际 开发 中 ， 让 每 个 人 对 概念 都 有 一 致 的 理解 是 很 重要 的 ， 写 书 也 是 如 此 。 


在 上 一 章 ,， 我们 使 用 了 很 多 概念 ， 并 且 假 设 你 已 经 知道 了 这 些 概念 的 名 字 和 大 致 用 法 。 对 于 入 门 来 说 ， 这 样 已 经 足够 了 ， 但 本 书 可 不 是 一 本 入 门 书籍 。 


本 章 中 ， 我 们 将 深入 讲解 这 些 概念 ， 有 些 提 法 甚至 可 能 颠覆 你 以 前 的 认 知 。 不 过 没关系 ， 这 是 成 长 中 的 重要 一 步 。 


有 了 稳固 的 基础 ， 才 能 理解 后 面 更 深 的 专家 级 章节 。 


什么 是 UI 


提起 UI， 你 一 定 知道 它 是 指 用 户 界面 (User Interface) ， 但 是 如 果 细 细 训 析 ， 你 会 发 现 它 没 那么 简单 。 


对 于 一 个 用 户 界面 ， 它 实际 上 包括 三 个 主要 部 分 : 


“内容: 你 想 展现 哪些 信息 ? 包括 动态 信息 和 静态 信息 。 注 意 ， 这 里 的 内 容 不 包括 它 的 格式 ， 比 如 生日 ， 跟 它 显示 为 红色 还 是 绿色 无 关 ， 跟 它 显 示 为 年 月 日 还 是 显示 为 生辰 八字 也 无 关 。 
: 外 观 : 这 些 信息 要 展示 为 什么 样子 ? 这 包括 格式 和 样式 。 样 式 还 包括 静态 样式 和 动画 效果 等 
“交互: 用 户 点 击 了 加 入 购物 车 按钮 时 会 发 生 什么 ? 还 要 更 新 哪些 显示 ? 


在 前 端 技 术 栈 中 ， 这 三 个 部 分 分 别 由 三 项 技术 来 负责 : HTML 负 责 描 述 内 容 ，CSS 负 责 描述 外 观 ，JavaScript 负 责 实现 交互 。 当 然 ， 这 三 者 之 间 没 有 明确 的 界限 ， 比 如 有 些 格式 化 需要 JavaScript 来 实 
而 HTML 也 往往 会 影响 一 些 样式 。 


如 果 进 一 步 抽象 ， 它 们 分 别 对 应 MVC 的 三 个 主要 部 分 : 内 容 一 一 Model， 外 观 一 一 View， 交 互 一 一 Controller。 


对 应 到 Angular 中 的 概念 ，“ 和 静态 内 容 ” 对 应 模板 ，“ 动 态 内 容 ” 对 应 scope， 交 互 对 应 Controller， 外 观 部 分 略微 复杂 点 : CSS 决 定 样式 ， 过 滤器 filter) 则 决定 格式 。 


有 了 这 些 概念 为 基础 ， 我 们 再 来 深入 讲解 下 Angular 中 的 概念 。 


2.2 模块 


语言 


块 ”。 


与 其 他 现代 语言 不 同 ， 当 前 版 本 的 JavaScript (ECMAScript 5) 并 没有 内 置 模块 化 语法 。 但 是 ， 随 着 程序 规模 越 来 越 大 ， 模 块 化 的 需求 越 来 越 重 要 ， 于 是 出 现 了 require:js 等 第 三 方 库 ， 试 图 用 库 来 弥补 
的 不 足 。Angular 并 不 依赖 requirejs 等 第 三 方 库 ， 而 是 自己 实现 了 模块 化 系统 ， 这 个 系统 的 核心 就 是 模块 (module) 。 


我 们 先 来 回顾 一 下 “模块 ”的 概念 ， 然 后 自然 就 明白 Angular 中 的 module 是 怎么 回 事 了 。 


所 谓 模块 是 指 把 相关 的 一 组 编程 元 素 (如 类 、 函 数 、 变 量 等 ) 组 织 到 同一 个 发 布 包 中 。 这 些 编程 元 素 之 间 紧 密 协 作 ， 隐 藏 实现 细节 ， 只 通过 公开 的 接口 与 其 他 模块 合作 。 


模块 是 一 个 粒度 适中 的 复 用 单位 ， 也 是 最 常见 的 复 用 形式 。 比 如 我 们 常用 的 第 三 方 库 往往 对 外 公开 好 几 个 类 ， 使 用 者 只 要 关注 其 公开 接口 就 可 以 了 ， 不 用 了 解 其 实现 细节 ， 这 种 第 三 方 库 就 是 一 个 “ 模 


Angular 的 module 也 是 如 此 。Angular 中 的 编程 元 素 包括 Service、Directive、Filter、Controller 等 ， 它 们 只 有 通过 模块 进行 “导出 ”才能 供 别 人 使 用 。 如 : 


angularmodule (‘com.ngnice.app') .service (ui，function () {http://www.hzcourse.com/resource/readBook? 


path=/openresources/teach_ebook/uncompressed/15538/OEBPS/Text/.….}) ; 语句 的 作 
{http://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/15538/OEBPS/Text/.….}f 作 为 一 个 回调 函数 以 ui 作为 名 字 注 册 进 去 。 这 样 ， 别 人 就 可 以 随时 通过 ui 


这 个 名 字 把 它 从 com.ngnice.app 模 块 中 取出 来 。 


所 以 , 我 们 


一 个 程序 往往 不 会 只 含有 一 个 模块 ， 这 些 模块 需要 互相 协作 ， 这 就 导致 了 模块 之 间 具 有 依赖 关系 ， 比 如 有 一 个 可 复 用 模块 ， 名 叫 common， 而 我 们 的 应 
月 这 种 依赖 关系 : angularmodule ('com.ngnice.app'，['common']) ， 这 样 ，Angular 就 知道 该 去 common 模 块 中 查找 这 个 名 叫 authHandler 的 S 
Javascript 文 件 ， 也 照样 是 无 法 找到 的 ， 这 是 新 手 很 容易 踩 坑 的 地 方 ， 请 特别 注意 。 同 时 ，Angular 还 可 以 自动 检测 出 循环 依赖 ， 以 免 出 现 无 限 递归 。 


么 我 们 就 要 先 声 | 


那么 就 算 引 入 了 它 所 在 的 


注意 ， 我 们 


可 以 简单 地 把 模块 看 做 一 个 注册 表 (registry) ， 它 保存 着 名 字 和 编程 元 素 的 对 照 表 ， 既 可 以 存 入 ， 也 可 以 取出 。 


刚才 调用 了 两 次 module 函 数 : angular.module ('com.ngnice.app') 和 angular.module ('com.ngnice.app'， 


前 者 的 作用 是 引 


availablehttp://www.hzcourse.com/resource/readBook?path=/openresources/teach_ ebook/uncompressed/15538/OEBPS/Text/...; 而 后 者 的 作 


一 个 模块 ， 也 就 是 说 查找 一 个 名 叫 app 的 模块 ， 并 返回 其 引 


个 名 为 common 的 模块 ， 第 二 个 参数 是 个 数组 ， 所 以 还 可 以 声明 依赖 更 多 个 模块 。 


模块 依赖 关系 是 一 棵 树 ， 这 就 意味 着 : 凡是 依赖 了 app 模 块 的 更 高 级 模块 ， 也 会 自动 依赖 app 所 依赖 的 common 等 模块 。 


2.3 作用 


域 


如 果 你 曾经 


jQuery 写 过 传统 的 非 MVC 前 端 程序 ， 那 么 在 第 1 章 “ 从 实战 开始 ”中 看 到 的 这 些 代码 可 能 会 让 你 感到 惊讶 


码 ， 不 再 一 听 到 写 测试 就 闪 过 “不 可 能 ”三 个 字 .…… 


“光荣 属于 


在 Angular 中 ，scope 通 过 原型 继承 的 方式 被 组 织 成 了 一 棵 树 ， 它 的 根 节 点 就 是 grootSscope， 这 是 Angular 在 启动 时 


接 下 来 ，Angular 会 解析 ng-app 包 含 的 HTML， 其 中 的 一 些 指令 ， 如 ng-view、ng-if、ng-repeat 等 也 会 创建 


MVC! ”我 们 说 Angular 是 个 MVW (Model-View-Whatever) 风格 的 框架 ， 而 在 Angular 中 扮演 Model 角 色 的 


自动 创建 的 ， 


是 : 先 取 出 一 个 名 为 com.ngnice.app 的 模块 ， 然 后 把 function () 


想 要 使 


[common']) ， 前 者 可 不 是 后 者 的 简写 形式 ， 而 是 具有 完全 不 同 的 含义 : 
， 如 果 模 块 不 存在 ， 则 会 触发 一 个 异常 [$injector: nomod]Module'com.ngnice.app'is not 
是 创建 一 个 模块 ， 并 


概念 ， 就 是 作用 域 (scope) 。 


和 这 些 指令 的 谋 套 关系 一 致 。 


由 于 它们 使 


个 同名 属性 ， 而 不 会 修改 上 级 scope 上 的 


as Vm 方式 ”。 


了 原型 继承 的 方式 ， 所 以 ， 凡 是 上 级 scope 拥 有 的 属性 ， 都 可 以 从 下 级 scope 中 读 取 ， 但 是 当 需 要 对 这 些 继承 下 来 的 


这 种 scope 树 很 好 的 体现 了 Model 之 间 的 谋 套 关系 ， 对 业务 数据 的 结构 是 一 个 很 恰当 的 抽象 。 


scope 之 所 以 如 此 重要 ， 是 因为 它 事 实 上 是 Angular 解 耦 业务 逻辑 层 和 视图 层 的 关键 : Controller 操 作 scope，View 则 展现 scope 的 内 容 ， 传 统 前 端 程序 中 大 量 复杂 的 DOM 操 纵 逻 辑 都 被 转变 成 对 scope 


的 操作 。 


属性 。 这 不 是 Bug， 而 是 “原型 继承 ”的 固有 语义 ， 这 是 用 惯 了 “类 继承 ”的 后 端 程序 员 需要 特别 注意 的 。 更 详细 的 分 析 和 解决 方式 请 参见 4.9 节 “使 


不 再 有 连篇 累 息 的 DOM 操 作 ， 不 再 有 混合 了 业务 逻辑 和 视图 逻辑 的 脐 肿 代 


它 通常 对 应 于 ng-app 指 令 ， 并 且 关 联 到 ng-app 所 在 的 节点 。 


己 的 scope， 这 些 scope 都 是 从 $rootScope 及 其 子 scope 创 建 出 来 的 ， 它 们 的 嵌 套 关系 也 


属性 进行 写 入 的 时 候 ， 问 题 就 来 了 : 写 入 会 导致 在 下 级 scope 上 创建 一 


这 种 树 形 结构 不 但 体现 在 数据 的 继承 关系 上 ， 而 且 体 现在 消息 的 冒 泡 机 制 上 。 有 DOM 基 础 的 同学 可 以 拿 它 和 DOM 的 消息 冒 泡 机 制 做 类 比 ， 在 后 面 的 2.11 节 “消息 ”中 我 也 会 专门 对 此 进行 讲解 。 


2.4 控制 器 


和 传统 的 MVC 程 序 中 一 样 ，Angular 中 的 控制 器 (controller) 用 来 对 模块 (scope) 进行 操作 ， 包 括 初始 化 数据 和 定义 事件 响应 函数 等 。 


我 们 常见 的 定义 控制 器 的 方法 是 : angularmodu 
path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/...}) ; ， 其 中 : angularmodule (com.ngnice.app') 语句 在 前 面 


就 是 这 个 modul 


e (‘com.ngnice.app') .controller (‘UserListCtrl', function () {http://www.hzcourse.com/resource/readBook? 


e 实 例 上 的 一 个 方法 ， 它 的 作用 是 把 后 面 的 函数 以 UserListCtr| 为 名 字 ， 注 册 到 模块 中 去 ， 以 便 需 要 时 可 以 根据 名 字 找 到 它 。 


使 用 控制 器 


的 场景 有 几 种 。 最 常见 的 是 用 在 路 由 中 。 


比如 在 angular-ui-router 中 ， 我 们 可 以 通过 下 面 的 语句 使 用 它 : 


$stateProvider.state('user.list', { 
Wel: list’; 
templateUrl: 'views/user/list.html', 
Controller: 'UserListCtrl' 


]) 


这 样 ， 当 
性 、 方 法 等 , 这 


初始 化 完 之 
点 的 一 致 性 ， 这 


户 访问 /userlist 这 个 URL 的 时 候 ，angular-ui-router 插 件 就 会 实例 化 一 个 名 为 UserListCtr| 的 控制 器 ， 同 时 ， 创 寻 
个 过 程 称 为 “初始 化 scope 对 象 ”。 


后 ， 加 载 模板 ， 并 且 把 scope 对 象 传 入 ， 模 板 中 会 通过 Angular 指 令 绑 定 这 些 属 性 、 方 法 。Angular 会 通过 一 个 称 为 摘要 循环 (digest cycle) 的 过 程 ， 自 动 维护 scope 变 量 和 视图 中 DOM 节 


EL 一 个 scope 对 象 并 传 给 它 。 这 


个 


已 经 讲 过 ， 是 返回 一 个 现 有 的 module 实 例 ， 而 Controller 


控制 器 实例 会 在 这 个 scope 对 象 上 创建 


时 候 的 DOM 我 们 称 之 为 “ 活 DOM (Live DOM) ”。 更 具体 的 工作 原理 我 们 会 在 第 3 章 “ 背 后 的 原理 ”的 3.2 节 “Angular 启 动 过 程 ” 中 详细 讲解 。 


一 个 党 


的 场景 是 在 单元 测试 中 。 


SB Dm 


通常 , 在 单 


以 我 们 的 测试 罗 


于 是 我 们 得 


元 测试 阶段 我 们 不 必 测 试 视图 ， 而 是 将 其 留待 端 到 端 测 试 阶段 。 在 单元 测试 阶段 ， 我 们 要 关注 的 是 控制 器 的 工作 逻辑 。 前 面 我 们 提 过 ， 控 制 器 的 作用 是 在 scope 对 象 上 创建 属性 、 方 法 ， 所 


辑 就 是 看 它 是 否 创建 了 正确 的 属性 ， 以 及 由 它 创 建 的 方法 是 否 能 正常 工作 。 


出 了 下 列 测试 逻辑 : 


Var scope = $rootScope.$new(); 


WE Ctrl = 


$controller('UserListCtrl1'); 


其 中 名 叫 authHandler 的 service。 那 
ervice。 如 果 没 有 声明 这 种 依赖 关系 ， 


明 这 个 模块 需要 依赖 一 


controller 


ctrl (scope); 


// TODO: 检测 scope 中 是 否 如 同 预期 的 产生 了 初始 数据 
// TODO: 调用 scope 中 的 方法 ， 然 后 检测 scope 变 量 是 否 发 生 了 预期 的 变化 


其 中 的 $contro 


ler 是 Angular 提 供 的 一 个 系统 服务 ， 用 来 查找 以 前 通过 module.controller ("UserListCtr['，function () {http://www.hzcourse.com/resource/readBook? 


path=/openresources/teach_ebook/uncompressed/15538/OEBPS/Text/...}) ; 注册 的 控制 器 函数 。 


还 有 一 个 不 常用 但 值得 提倡 的 场景 是 在 指令 中 ， 特 别 是 用 来 封装 一 个 界面 片段 的 “组 件 型 指令 ”， 我 们 在 2.6 节 “指令 ”中 会 进一步 展开 讲解 。 之 所 以 在 这 种 类 型 的 指令 中 提倡 使 
方便 进行 单元 测试 ， 而 不 用 引入 对 视图 层 的 测试 。 

有 一 些 第 三 方 服务 或 指令 也 会 使 用 控制 器 ， 它 们 所 做 的 工作 实际 上 和 angular-ui-router 一 样 的 : 创建 一 个 scope， 找 到 一 个 控制 器 ， 然 后 用 控制 器 对 scope 进 行 初始 化 ， 最 后 把 sc 
成 的 Live DOM 泻 染 出 来 。 

掌握 了 控制 器 的 工作 原理 ， 在 自己 的 代码 中 也 可 以 灵活 运用 ， 凡 是 需要 Live DOM 的 地 方 都 可 以 通过 各 种 形式 使 用 。 

生成 Live DOM 时 涉及 另 一 个 重要 的 知识 点 $compile， 完 整 的 实现 方式 我 会 在 后 面 2.6 节 “指令 ”中 讲解 。 
2.5 ”视图 

我 们 有 了 模块 和 控制 器 之 后 ， 内 容 和 交互 逻辑 就 已 经 基本 确定 了 ， 接 下 来 我 们 就 得 把 它们 展示 给 用 户 了 ， 这 时 就 用 到 “视图 ” (view) 。 


CSs 并 不 在 Angular 的 范围 内 ， 在 实践 中 ， 常 常 结合 一 套 成 熟 的 CSS 架 构 来 做 ， 比 如 Bootstrap 就 可 以 和 Angular 结 合 得 非常 好 。 

Angular 中 实现 视图 的 主体 是 模板 。 最 常见 的 模板 形式 当然 是 HTML， 也 有 通过 jade 等 中 间 语言 编译 为 HTML 的 。 模 板 中 包括 静态 信息 和 动态 信息 ， 静 态 信息 是 指 直接 写 死 (hard 
而 动态 信息 则 是 对 scope 中 内 容 的 展示 。 

展示 动态 信息 的 方式 有 两 种 : 


. 绑 定 表达 式 : 形式 如 ffusemame}}， 绑 定 表达 式 可 以 出 现在 HTML 中 的 文本 部 分 或 节点 的 属性 部 分 。 


“指令: 


视图 中 的 


图 


形式 如 <span ng-bind="usermame"></span>， 事 实 上 任何 指令 都 可 以 用 来 展示 动态 


绑 定 表达 式 或 指令 中 


信息 ， 展 示 的 方式 取决 于 指令 的 内 在 实现 逻辑 。 


的 变量 或 函数 都 是 $gscope 中 的 一 个 


是 一 种 很 常 


的 方式 ， 但 是 如 果 使 


不 当 ， 


控制 器 ， 主 要 是 为 了 


ope 绑 定 到 视图 ， 把 生 


code) 在 模板 中 的 ， 


属性 或 方法 ， 上 面 两 个 表达 式 绑 定 的 都 是 $gscope.username， 但 是 也 可 以 绑 定 到 方法 ， 如 $scope.getFirstName () 。 绑 定 到 方法 
b 可 能 导致 一 些 很 难 追 查 的 Bug。 特 别 要 注意 不 要 在 方法 中 返回 一 个 新 对 象 或 新 数组 ， 否 则 会 出 现 “10$digest iterations reached.” 错 误 。 


3 一 个 要 点 是 ， 在 表达 式 中 无 法 直接 使 


简单 包装 一 层 。 


除了 展示 信息 之 外 ， 


图 


window 对 象 下 的 全 


局) 


属性 或 方法 。Angular 这 样 的 设计 可 以 确保 视图 的 局 部 性 ， 以 免 受 到 意料 之 外 的 干扰 而 出 现 Bug。 如 果 确 实 需要 调 


常 还 需要 对 信息 进行 格式 化 ， 比 如 把 一 个 Date 对 象 格式 化 为 “年 -月 -日 ”格式 或 “年 -月 -日 时 : 分: 秒 ” 


格式 。 一 个 分 层 清晰 的 系统 ， 在 scope 中 通常 是 


常 
图 


想 要 显示 成 什么 格式 是 视 | 


屋 的 事情 。 这 样 的 设计 可 以 提高 Model 层 的 内 聚 性 (只 做 一 件 事 ) ， 把 与 此 相关 的 需求 变更 在 视图 层 处 理 ， 可 以 提高 Model 层 的 稳定 性 。 


Angular 中 对 信息 进行 格式 化 的 机 制 是 过 滤器 (Filter) ， 如 : {ftbirthdayldatejj。 对 过 滤器 的 更 深入 讲解 ， 请 参见 稍 后 的 2.7 节 “过 滤器 ”。 


26 指令 


指令 (directive) 是 Angular 中 一 个 很 重要 的 概念 ， 相 当 于 一 个 自 定义 的 HTML 元 素 ， 在 Angular 官 方 文档 中 称 它 为 HTML 语 言 的 DSL (特定 领域 语言 ) 扩 


展 。 


， 请 在 Controller 中 


没有 格式 的 概念 的 ， 


按照 指令 的 使 用 场景 和 作用 可 以 分 为 两 种 类 型 的 指令 : 它们 分 别 为 组 件 型 指令 (Component) 和 装饰 型 器 指令 (Decorator) ， 它 们 的 分 类 命名 ， 并 不 是 笔者 独创 的 新 法 ， 它 是 在 Angular 2.x 中 提出 
的 概念 ， 笔 者 认为 它们 也 同样 可 以 使 用 于 Angular 1.x。 


组 件 型 指令 主要 是 为 了 将 复杂 而 庞大 的 View 分 离 ， 使 得 页 面 的 View 具 有 更 强 的 可 读 性 和 维护 性 ， 实 现 “ 高 内 聚 低 耦 合 ” 
自动 聚焦 (autoFocus) 、 双 
的 大 多 数 指令 ， 是 


有 某 种 能 力 ， 如 
Angular 中 内 置 


对 于 组 件 型 指令 和 装饰 器 型 指令 的 这 两 种 


属于 装饰 器 型 指令 ， 它 们 负责 收集 和 创建 $watch， 然 后 利 有 


ar 的 “ 脏 检 查 机 制 ” 保 持 View 的 同步 。 


Angu 


| 


和 “分 离 关注 点 ”的 有 效 手段 ， 而 装饰 器 型 指令 则 是 为 DOM 添 加 行为 ， 使 
向 绑 定 、 可 点 击 (ngClick) 、 条 件 显示 /隐藏 (ngShow/ngHide) 等 能 力 ， 同 时 它 也 是 链接 Model 和 View 之 间 的 桥梁 ， 保 持 View 和 Model 的 同步 。 在 


区 分 是 非常 重要 的 ， 它 们 在 写法 、 业 务 含义 、 适 


围 等 方面 都 有 非常 明显 的 


汉 


2.7 ”过 滤器 
我 们 在 第 1 章 中 使 


过 滤器 标准 的 定义 方式 是 : 


angular.module ('com.ngnice.app') .filter('myFilter'，function(/* 这 里 可 以 用 参数 进行 依 


了 多 个 系统 内 置 的 过 滤器 (filter) ， 还 写 了 一 个 自 定义 过 滤器 ， 这 里 我 们 再 系统 化 的 从 理论 层面 讲 一 下 。 


资 注入 */) 


return function (input) { 
Var result; 
// TODO: 把 input 变 换 成 Fesult 
return result; 


过 
]) 7 


可 以 看 出 ， 过 滤器 是 一 个 特殊 的 函数 ， 它 返 


myFilter 再 次 被 执行 。 


区 别 ， 理 解 了 它们 ， 对 于 我 们 日 常 的 指令 开发 也 具有 很 好 的 指导 作用 。 


回 一 个 函数 ， 这 个 函数 接收 的 第 一 个 参数 就 是 被 过 滤 的 变量 ， 如 使 


{1ImyFiten}j 时 ， 这 个 input 参 数 的 值 就 是 1， 当 这 个 值 是 个 变量 时 ， 它 的 变化 会 导致 


过 滤器 还 可 以 接收 第 二 个 参数 ， 乃 至 第 N 个 参数 ， 


如 : 


return function (input, argl, arg2, arg3) { 
http:/ 
}; 


/www .hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/... 


而 使 用 者 则 通过 {f1|myFilter: 2: 3: 4 的 形式 调用 它 。 这 种 情况 下 ，arg1 的 值 为 2，arg2 的 值 为 3，arg3 的 值 为 4。 
从 使 用 者 的 角度 ， 我 们 可 以 把 filter 看 做 一 个 函数 ， 它 负责 接收 输入 ， 然 后 转换 成 输出 。 每 当 输 入 参数 发 生变 化 时 ， 它 就 被 执行 ， 其 输出 会 被 视图 使 用 。 
filter 除 了 可 以 用 在 绑 定 表达 式 之 外 ， 还 可 以 用 在 指令 中 通过 值 绑 定 的 属性 ， 如 <ling-repeat="item in itemsl|filter: 'a">http://www.hzcourse.com/resource/readBook? 


path=/openresources/teach_ebook/uncompresse 


由 于 其 简单 灵巧 ，filter 非 常 适合 复 用 。 
表格 ， 这 有 助 于 对 过 滤器 的 深入 理解 。 


2.8 路 由 


前 端 “路由” (router) 的 概念 
官方 的 路 由 库 称 为 ngRoute， 由 


其 过 


ngRoute 的 写法 是 : 


S$routeProvider.when('/url', { 
templateUrl: 'path/to/template.html', 
controller: 'SomeCtrl' 


1D); 


官方 提供 的 几 个 filter 就 有 很 多 种 


d/15538/OEBPS/Text/...</li>。 


自行 尝试 


法 ,读者 可 以 参照 官方 的 API| 文 档 和 实战 篇 的 案例 ， 


0 后 端的 路 由 是 一 样 的 ， 也 就 是 根据 URL 找 到 view-controller 组 合 的 机 制 。 最 开始 的 时 人 息 ，Angular 的 路 由 库 合并 在 核心 库 中 ， 现 在， 路 由 库 从 Angular 核 心 库 中 剥离 出 
简陋 ， 我 在 工程 实践 中 比较 常 F 


的 是 一 个 第 三 方 路 由 库 : angular-ui-router。 


ng-repeat，filter，orderBy 的 组 合 来 实现 


有 前 端 过 滤 功能 的 


angular-ui-router 的 写法 是 : 


$stateProvider.state('name', { 


Mel /il 
templateUrl: ‘'path/to/template.html', 
controller: 'SomeCtrl' 


Ds 


虽然 写法 不 同 ， 但 是 其 工作 原理 都 是 类 似 的 : 


监听 $locationChangeSuccess 事 件 ， 它 将 在 每 次 URL (包括 # 后 | 


在 这 个 事件 中 ， 将 根据 $routeProvider/$stateProvider 中 注册 的 路 


{ 


EL “orl'y 
templateUrl: 'path/to/template.html', 
controller: 'SomeCtrl' 


} 


的 hash 部 分 ) 发 生变 化 时 触发 。 


H 


由 表 中 的 URL 部 分 查阅 其 路 由 对 象 ， 如 : 


从 这 个 路 由 对 象 中 ， 可 以 取 到 两 个 关键 参数 : templateUrl/controller。 


“ 创建 一 个 scope 对 象 。 


“ 加载 模板 ， 借 助 浏览 器 的 能 力 把 它 解析 为 静态 的 DOM。 


“ 使 用 Controller 对 scope 进 行 初始 化 ， 添 加 属性 和 方法 。 


“ 使 用 $compile 服 务 把 刚才 生成 的 DOM 和 scope 关 


医 起 来 ， 变 成 一 个 Live DOM。 


“ 用 这 个 Live DOM 替 换 ng-viewy/ui-view 中 的 所 有 内 容 。 


也 


你 可 能 还 有 印象 ， 这 个 过 程 我 们 在 前 面 的 第 1 


这 个 过 程 非常 简单 。 作 为 练习 ， 你 可 以 使 


2.9 ”服务 


如 果 你 是 一 个 


服务 是 对 公共 代码 的 抽象 ， 比 如 ， 如 果 在 多 个 控制 器 中 都 出 现 了 相似 的 代码 ， 那 么 把 它 人 


类 似 的 原理 来 实现 一 个 简单 的 路 由 功能 ， 这 个 过 程 中 会 接触 到 很 多 Angular 核 心服 务 ， 对 理解 Angular 的 核心 工作 原理 非常 有 用 。 


后 端 程序 员 ， 那 么 对 服务 (Service) 的 概念 一 定 不 会 陌生 。 在 Angular 中 ， 服 务 的 概念 是 一 样 的 ， 差 别 只 在 于 技术 细节 。 


E 复 你 


] 提 取出 来 ， 封 装 成 一 个 服务 ， 你 将 更 加 遵循 DRY 原 则 ( 即 : 不 要 


自己 ) ， 在 可 维护 性 等 方 


如 同 我 们 在 第 1 章 的 tree 服 务 中 所 看 到 的 ， 


但 是 ， 在 工程 实践 中 ， 我 们 引入 
虑 抽取 服务 了 一 一 哪怕 它 还 看 不 到 复 


价值 。 


由 于 服务 剥离 了 和 


民 务 的 首要 目的 是 为 了 优化 代码 结构 ， 而 不 是 复 用 。 


体 表 现 相关 的 部 分 ， 而 聚焦 于 业务 逻辑 或 交互 逻辑 ， 它 更 加 容易 被 测试 和 复 用 。 


只 是 一 项 结果 ， 不 是 目标 。 所 以 ， 当 你 发 现 你 的 代码 中 混杂 了 表现 层 逻 辑 和 业务 


如 果 你 遵循 着 测试 驱动 开发 的 方式 ， 那 么 当 你 觉得 


服务 的 概念 通常 是 和 依赖 注入 紧密 相关 的 ，Angu 


由 于 依赖 注入 的 要 求 ， 服 务 都 是 单 例 的 ， 这 样 我 人 


测试 很 难 写 的 时 候 ， 回 头 审视 下 ， 看 是 否 这 里 可 以 抽取 出 一 个 服务 ， 转 而 对 服务 进行 测试 。 


lar 中 也 一 样 。 如 果 你 困惑 于 在 Javascript 中 是 如 何 实现 依赖 注入 的 ， 请 参见 第 3 章 “ 背 后 的 原理 ”中 的 3.3 节 “依赖 注入 ” 


] 才 能 把 它们 到 处 注入 ， 而 不 


手动 管理 它们 的 生命 周期 ， 并 容许 Angular 实 现 “ 延 迟 初始 化 ”等 优化 措施 。 


屋 逻 辑 的 时 候 ， 你 就 要 认真 考 


在 Angular 中 ， 服 务 分 成 很 多 种 类 型 : 


. 常量 (Constant) : 用 于 声明 不 会 被 修改 的 值 。 


内 


量 (Value) : 用 于 声明 会 被 修改 的 值 。 


“服务 (Service) : 没 错 ， 它 跟 服 务 这 个 大 概念 同名 ,原作 者 在 “开发 者 指南 ”中 把 这 种 行为 比喻 为 “把 自己 的 孩子 取 名 叫 “ 孩 子 ” 一 一 一 个 会 气 疯 老 师 的 名 字 ”。 事 实 上 ， 同 名 的 原因 是 一 一 它 跟 后 
端 领域 的 “服务 ”实现 方式 最 为 相似 : 声明 一 个 类 ， 等 待 Angular 把 它 new 出 来 ， 然 后 保存 这 个 实例 ， 供 它 到 处 注入 。 


“工厂 (Factory) : 它 跟 上 面 这 个 “服务 ”不 同 ， 它 不 会 被 new 出 来 ，Angular 会 调用 这 个 函数 ， 获 得 返回 值 ， 然 后 保存 这 个 返回 值 ， 供 它 到 处 注入 。 它 被 取 名 为 “工厂 ”是 因为 : 它 本 身 不 会 被 用 于 注 
我 们 使 用 的 是 它 的 产品 。 但 是 与 现实 中 的 工厂 不 同 ， 它 只 产 出 一 份 产品 ， 我 们 只 是 到 处 使 用 这 个 产品 而 已 。 


> 


: 供应 商 (Provider) : “工厂 ”只 负责 生产 产品 ， 它 的 规格 是 不 受 我 们 控制 的 ， 而 “供应 商 ” 更 加 灵活 ， 我 们 可 以 对 规格 进行 配置 ， 以 便 获得 定制 化 的 产品 。 


事实 上 ， 除 了 Constant 外 ， 所 有 这 些 类 型 的 服务 ， 背 后 都 是 通过 Provider 实 现 的 ， 我 们 可 以 把 它们 看 做 让 Provider 更 容易 写 的 语法 糖 。 一 个 明显 的 佐证 是 : 当 你 使 用 一 个 未 定义 的 服务 时 ，Angular 给 
你 的 错误 提示 是 它 对 应 的 Provider 未 找到 ， 比 如 我 们 使 用 一 个 未 定义 的 服务 : test， 那 么 Angular 给 出 的 提示 是 : Unknown provider: testProvider< -test。 


Constant 比 较 特 殊 ， 我 们 稍 后 讲解 ， 我 们 先 来 看 其 他 几 个 。 


Provider 的 声明 方式 如 下 : 


angular.module ('com.ngnice.app') .provider('greeting', function() { 
Var name = 'world'; 
this.setName = function (name) { 
_name = name; 
] 7 
this.$get = function(/* 这 里 可 以 放 依赖 注入 变量 */) { 
return 'Hello, ' + name; 
a 


Ds 


使 用 时 : 


angular.module ('com.ngnice.app') .controller ('SomeCtrl', function($scope, greeting) { 
// 这 里 greeting 应 该 等 于 'Hello，world'， 怎 么 样 ， 你 猜 对 了 吗 ? 
$scope.message = greeting; 


Ni 


对 Provider 进 行 配置 时 : 


angular.module ('com.ngnice.app') .config (function (greetingProvider) { 
greetingProvider.setName ('wolf'); 


Ds 


容器 的 伪 代 码 如 下 : 
var instance = diContainer['greeting']; // 先 找 是 否 已 经 有 了 一 个 实例 
if (!angular.isUndefined(instance)) { 
return instance; // 如 果 已 经 有 了 一 个 实例 ， 直 接 返 回 
} 
var ProviderClass = angular.module('com.ngnice.app') .lookup ('greetingProvider'); // 在 服务 名 后 面 自动 加 上 Provider 后 缀 是 Angular 遵 循 的 一 项 约定 
Var provider = new ProviderClass () 7 // 把 Provider 实 例 化 
provider.setName ('wolf'); 
instance = provider.$get (); // 调用 $get， 并 传 入 依赖 注入 参数 
diContainer['greeting'] = instance;  // 把 调用 结果 存 下 来 


return instance; 


事实 上 ， 如 果 不 需要 对 name 参 数 进行 配置 ， 声 明代 码 可 以 简化 为 : 


angular.module ('com.ngnice.app') .value ('greeting', 'Hello, world'); 


也 就 是 需要 这 么 多 语法 糖 的 原因 。 


降 


下 面 给 出 其 他 语法 糖 的 等 价 形式 : 


2.10 承诺 


承诺 (Promise) 不 是 Angular 首 创 的 。 作 为 一 种 编程 模式 ， 它 出 现在 .…..1976 年 ， 比 JavaScript 还 要 古老 得 多 。Promise 全 称 是 Futures and promises (未 来 与 承诺 ) 。 要 想 深 入 了 解 ， 可 以 参 
Whttp://en.wikipedia.org/wiki/Futures and_promises。 


而 在 JavaScript 世 界 中 ， 一 个 广泛 流行 的 库 叫 作 Q (https://github.com/kriskowal/q) 。 而 Angular 中 的 $q 就 是 从 它 引入 的 。 


1. 生 活 中 的 一 个 例子 


Promise 解 决 的 是 异步 编程 的 问题 ， 对 于 生活 在 同步 编程 世界 中 的 程序 员 来 说 ， 它 可 能 比较 难于 理解 ， 这 也 构成 了 Angular 入 门 门槛 之 一 ， 本 节 将 用 生活 中 的 一 个 例子 对 此 做 一 个 形象 的 讲解 。 


假设 有 一 个 家 具 厂 ， 而 它 有 一 个 VIP 客户 张 先生 。 


有 一 天 张 先生 需要 一 个 豪华 衣柜 ， 于 是 ， 他 打 电 话 给 家 具 厂 说 : “我 需要 一 个 衣柜 ， 回 头 做 好 了 给 我 送 来 ”， 这 个 操作 就 叫 $q.defer () ， 也 就 是 延期 。 因 为 这 个 衣柜 不 是 现在 要 的 ， 所 以 张 先生 这 是 
在 发 起 一 个 可 延期 的 请 求 。 


家 具 厂 接 下 了 这 个 订单 ， 给 他 留 下 了 一 个 回执 号 ， 并 对 他 说 : “我 们 做 好 了 会 给 您 送 过 去 ， 放 心 吧 ”。 这 叫 作 Promise， 也 就 是 给 了 张 先 生 一 个 “承诺 ”。 


这 样 ， 这 个 defer 算 是 正式 创建 了 ， 于 是 他 把 这 件 事 记录 在 自己 的 日 记 上 ， 并 且 同 时 记录 了 回执 号 ， 这 个 变量 叫 作 deferred， 也 就 是 已 延期 事件 。 


现在 ， 张 先生 就 不 用 再 去 想 着 这 件 事 了 ， 该 做 什么 做 什么 ， 这 就 是 “异步 ”请 求 的 含义 。 


假设 家 具 厂 在 一 周 后 做 完了 这 个 衣柜 ， 并 如 约 送 到 了 张 先生 家 ( 包 邮 哦 ， 亲 ) ， 这 就 叫 作 deferred.resolve (衣柜 ) ， 也 就 是 “问题 已 解决 ， 这 是 您 的 衣柜 ”。 而 这 时 候 张 先 生 只 要 取出 一 下 这 个 “ 衣 
柜 ”参数 就 行 了 。 而 且 ， 这 个 “邮包 ”中 也 不 一 定 只 有 衣柜 ， 还 可 以 包含 别 的 东西 ， 比 如 厂家 宣传 资料 、 产 品名 录 等 。 整 个 过 程 中 轻松 愉快 ， 谁 也 没 等 谁 ， 没 有 浪费 任何 时 间 。 


假设 家 具 厂 在 评估 后 发 现 这 个 规格 的 衣柜 我 们 做 不 了 ， 那 么 它 就 需要 deferred.reject (理由 ) ， 也 就 是 “我 们 不 得 不 拒绝 您 的 请 求 ， 因 为 …..′”。 拒 绝 没有 时 间 限 制 ， 可 以 发 生 在 给 出 承诺 之 后 的 任何 时 
候 ， 甚 至 可 能 发 生 在 快 做 完 的 时 候 。 而 且 拒绝 时 候 的 参数 也 不 仅仅 限于 理由 ， 还 可 以 包含 一 个 道歉 信 ， 违 约 金 之 类 的 。 总 之 ， 你 想 给 他 什么 就 给 他 什么 ， 如 果 你 觉得 不 会 惹恼 客户 ， 那 么 不 给 也 没关系 。 


假设 家 具 厂 发 现 ， 自 己 正好 有 一 个 符合 张 先生 要 求 的 存货 ， 它 就 可 以 用 $q.when ( 现 有 衣柜 ) 来 兑现 给 张 先 生 的 承诺 。 于 是 ， 这 件 事 立 刻 解决 了 ， 名 大 欢喜 。 张 先生 可 不 在 乎 你 是 从 头 做 的 还 是 现 有 的 
成 品 ， 只 要 达到 自己 的 品质 要 求 就 满意 了 。 


假设 这 个 家 具 厂 对 客户 格外 的 细心 ， 它 还 可 以 通过 deferred.notify (进展 情况 ) 给 张 先生 发 送 进展 情况 的 “通知 ”。 


这 样 ， 整 个 异步 流程 圆满 完成 ! 无 论 成 功 还 是 失败 ， 张 先生 都 没有 往 里 面 投入 任何 额外 的 时 间 成 本 。 


好 ， 我 们 再 扩展 一 下 这 个 故事 : 


张 先生 又 来 订货 了 ， 这 次 他 分 多 次 订 了 一 张 桌子 ， 三 把 椅子 ， 一 张 席梦思 。 但 他 不 希望 今天 收 到 个 桌子 ， 明 天 收 到 个 椅子 ， 后 天 又 得 签收 一 次 席梦思 ， 而 是 希望 家 具 厂 做 好 了 之 后 一 次 性 送 过 来 ， 但 是 
他 当初 又 是 分 别 下 单 的 ， 那 么 他 就 可 以 重新 跟 家 具 厂 要 一 个 包含 上 述 三 个 承诺 的 新 承诺 ， 这 就 是 $q.all ([ 桌 子 承诺 ， 椅 子 承诺 ， 席 梦 思 承诺 ]) ， 这 样 ， 他 就 不 用 再 关注 以 前 的 三 个 承诺 了 ， 直 接 等 待 这 个 新 
的 承诺 完成 ， 到 时 候 只 要 一 次 性 签收 了 前 面 的 这 些 承诺 就 行 了 。 


2. 回 调 地 狱 和 Promise 


通过 上 面 这 个 生活 中 例子 ， 相 信和 作为 读者 的 你 已 经 了 解 到 了 异步 和 Promise 的 方式 。 为 什么 我 们 需要 Promise 呢 ? 


Javascript 是 一 门 很 灵活 的 语言 ， 由 于 它 寄宿 在 浏览 器 中 以 事件 机 制 为 核心 ， 所 以 在 我 们 的 Javascript 编 码 中 存在 很 多 的 回调 函数 。 这 是 一 个 高 性 能 的 编程 模式 ， 所 以 它 衍 生出 了 基于 异步 /O 的 高 性 能 
Nodejs 平 台 。 但 是 如 果 不 注意 我 们 的 编码 方法 ， 那 么 我 们 就 会 陷入 “回调 地 狱 ”， 也 有 人 称 为 “回调 金字 塔 ”。 钨 套 式 的 回调 地 狱 ， 代 码 将 会 变 得 像 意大利 面条 一 样 。 如 下 边 的 庶 套 回调 函数 一 样 : 


asyncl (function (){ 
async2 (function (){ 
async3 (function (){ 
async4 (function (){ 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/. .http://www.hzcourse.com/resource/readBook?path=/openre 


这 样 谋 套 的 回调 函数 ， 让 我 们 的 代码 的 可 读 性 变 得 很 差 ， 而 且 很 难于 调试 和 维护 。 所 以 为 了 降低 异步 编程 的 复杂 性 ， 开 发 人 员 一 直 寻 找 简便 的 方法 来 处 理 异步 操作 。 其 中 一 种 处 理 模式 称 为 Promise， 
它 代表 了 一 种 可 能 会 长 时 间 运 行 而 且 不 一 定 必须 完成 的 操作 的 结果 。 这 种 模式 不 会 阻塞 和 等 待 长 时 间 的 操作 完成 ， 而 是 返回 一 个 代表 了 承诺 的 Promised) 结果 的 对 象 。 它 通常 会 实现 一 种 名 叫 then 的 方 
法 ， 用 来 注册 状态 变化 时 对 应 的 回调 函数 。 


Promise 在 任何 时 刻 都 处 于 以 下 三 种 状态 之 一 : 未 完成 (pending) 、 已 完成 (resolved) 和 拒绝 (rejected) 三 个 状态 。 以 CommonJS Promise/A 标 准 为 例 ，Promise 对 象 上 的 then 方 法 负责 添加 针 
对 已 完成 和 拒绝 状态 下 的 处 理 函 数 。then 方 法 会 返回 另 一 个 Promise 对 象 ， 以 便于 形成 Promise 管 道 ， 这 种 返回 Promise 对 象 的 方式 能 够 让 开发 人 员 把 异步 操作 串联 起 来 ,如 
then (resolvedHandler，rejectedHandler) 。resolvedHandler 回 调 函 数 在 Promise 对 象 进 入 完成 状态 时 会 触发 ， 并 传递 结果 ; rejectedHandler 函 数 会 在 拒绝 状态 下 调用 。 


所 以 我 们 上 边 的 谋 套 回调 函数 可 以 修改 为 : 


asyncl () .then (async2) .then (async3) .catch (showError); 


这 下 代码 看 着 清爽 多 了 ， 我 们 不 再 需要 忍受 庶 套 的 无 底 深渊 。 


在 ES6 的 标准 版 中 已 经 包含 了 Promise 的 标准 ， 很 快 它 就 将 会 从 浏览 器 本 身 得 到 更 好 的 支持 。 与 此 同时 在 ES6 的 标准 版 中 ， 还 引入 了 Python 这 类 语言 中 的 generator (迭代 器 的 生成 器 ) 概念 ， 它 本 意 并 
不 是 为 异步 而 生 的 ， 但 是 它 拥有 天 然 的 yield 和 暂停 函数 执行 的 能 力 ， 并 保存 上 下 文 ， 再 次 调用 时 恢复 当时 的 状态 ， 所 以 它 也 被 很 好 地 运用 于 JavaScript 的 异步 编程 模型 中 ， 其 中 最 出 名 的 案例 当 属 Node 
Express 的 下 一 代 框 架 KOA 了 。 


最 后 还 有 个 好 消息 ， 在 ES7 的 标准 中 将 有 可 能 引入 async 和 await 这 两 个 关键 词 ， 来 更 大 的 简化 我 们 的 Javascript 异 步 编程 模型 。 我 们 就 可 以 如 下 的 方式 以 同步 的 方式 编写 我 们 的 异步 代码 : 


async function sleep (timeout) { 
return new Promise ( (resolve, reject) => { 
setTimeout (function() { 
resolve (); 
}, timeout); 


DD); 


(async function( 
console.10g(' 做 一 些 事情 ,，' + new Date()); 
await sleep(3000); 
Console.1og(' 做 另 一 些 事情 , ' + new Date()); 
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3.Angular 中 的 Promise 


在 Angular 中 大 量 使 用 着 Promise， 最 简单 的 是 $timeout 的 实现 ， 我 拷贝 过 来 并 加 上 了 注释 : 


function timeout (fn, delay, invokeApply) { 
// 创建 一 个 延期 请 求 
Var deferred = $q.defer(), 
promise = deferred.promise, 
skipApply = (isDefined (invokeApply) && !invokeApply), 


timeoutId; 
timeoutId = $browser.defer (function() { 
te 


yl 
// 成 功 ， 将 触发 then 的 第 一 个 回调 函数 
deferred.resolve (fn()); 
} catch(e) { 
// 失败 ， 将 触发 then 的 第 二 个 回调 函数 或 catch 的 回调 函数 
deferred. reject (e); 
$exceptionHandler (e); 
} finally { 
delete deferreds[promise.$$timeoutId]; 


} 
if (!skipApply) $rootScope.$apply(); 


}, delay); 

promise.s$$timeoutId = timeoutId; 
deferreds [timeoutId] = deferred; 
// 返回 承诺 

return promise; 


timeout.cancel = function (promise) { 
if (promise && promise.$$timeoutId in deferreds) { 
deferreds [promise.$$timeoutId] .reject ('canceled'); 
delete deferreds[promise.$$timeoutId]; 
return $browser.defer.cancel (promise.$$timeoutId); 


return false; 


在 传统 的 DOM 编 程 中 ,消息 (message) 机 制 非常 有 用 ,特别 是 消息 冒 泡 机 制 ， 让 我 们 不 用 额外 的 代码 就 可 以 实现 “职责 链 ” 模式。 但 是 我 们 要 尽量 摆脱 DOM 操 作 ， 难 道 这 是 必须 使 用 DOM 操 作 的 
场景 吗 ? 不 是 的 ，Angular 中 也 有 一 种 不 依赖 DOM 的 消息 机 制 ， 本 节 中 我 们 就 对 它 进行 详细 讲解 。 


我 们 知道 ，Scope 也 被 组 织 成 了 一 棵 树 ， 跟 DOM 树 具有 相似 的 结构 。Angular 的 消息 机 制 就 是 通过 scope 上 的 几 个 函数 实现 的 : 


“ $broadcast (name，args) : 向 当前 scope 及 其 所 有 下 级 scope 递 归 广播 名 为 name 的 消息 ， 并 带 上 args 参 数 。 
“$emit (name，args) : 向 当前 scope 及 其 所 有 直线 上 级 scope 发 送 名 为 name 的 消息 ， 并 带 上 args 参 数 。 


“ $on (name，listener) : 监听 本 scope 收 到 的 消息 ，listener 的 形式 为 : function (event，args) {}，event 参 数 的 结构 和 DOM 中 的 event 类 似 。 


以 | 


网 


2-1 所 示 的 结构 的 scope 为 例 : 


当 我 们 在 rootScope 上 调用 $broadcast 广 播 一 个 消息 时 ， 任 何 一 个 scope (包括 rootScope) 上 通过 $on 注 册 的 listener 都 将 收 到 这 个 消息 。 当 我 们 在 scope1 上 调用 $broadcast 广 播 一 个 消息 时 
时 ，scope1/scope1.1/scope1.2 将 依次 收 到 这 个 消息 。 当 我 们 在 rootScope 上 调用 $emit 上 传 一 个 消息 时 ，rootScope 将 收 到 这 个 消息 。 当 我 们 在 scope1.1 上 调用 $emit 上 传 一 个 消息 
时 ，scope1.1/scope1/rootScope 将 依次 收 到 这 个 消息 。 


rootScope 


图 2-1 scope 树 


当 通 过 $emit 上 传 一 个 消息 时 ， 将 使 用 冒 泡 机 制 ， 比 如 ， 假 设 我 们 在 scope1.1 上 调用 $emit， 我 们 在 scope1 上 注册 一 个 listener: 


scopel.$on('name', function(event) { 
event .stopPropagation () 7 


Es 


这 个 stopPropagation 函 数 将 阻止 冒 泡 ， 也 就 是 说 scope1.1 和 scope1 都 将 正常 接收 到 这 个 消息 ， 但 rootScope 就 接收 不 到 这 个 消息 了 。 


有 时 候 ， 用 消息 机 制 和 普通 回调 函数 都 能 达到 类 似 的 效果 ， 如 何 选择 呢 ? 


当 一 个 让 套 结构 具有 树 形 的 业务 含义 时 ， 我 们 就 优先 使 用 消息 机 制 来 通讯 。 或 者 从 另 一 个 角度 看 ， 符 合 “ 职 责 链 ” 模 式 的 适用 场景 时 ， 消 息 机 制 比较 合适 。 反 之 ， 应 该 使 用 普通 的 回调 函数 。 


| 


如 果 难 以 决定 使 用 消息 还 是 回调 函数 ， 那 么 就 优先 使 用 回调 函数 (主要 是 Angular 事 件 ) ， 因 为 这 种 情况 下 执行 路 径 比较 明确 ， 容 易 跟 踪 。 或 者 在 对 此 有 深入 理解 前 ， 先 使 用 表面 的 判断 方式 : 一 个 事 
件 是 否 需要 被 很 多 地 方 处 理 ? 调用 stopPropagation 是 否 有 意义 ? 如 果 是 ， 那 么 用 消息 ， 否 则 用 回调 。 


2.12 ”单元 测试 


我 们 在 第 1 章 中 已 经 写 过 两 个 单元 测试 (unit test) 了 ， 这 里 我 们 简单 讲 一 下 理论 知识 。 


在 Angular 中 ， 单 元 测试 的 概念 和 传统 的 后 端 编程 是 一 样 的 。 也 就 是 对 某 些小 型 功能 块 儿 进行 测试 ， 保 障 其 工作 逻辑 正常 。 单 元 测试 要 尽 可 能 局 部 化 ， 不 要 牵扯 进 很 多 个 模块 ， 必 要 时 可 进行 mock ( 模 
拟 ) 。 


2.13 ” 端 到 端 测试 


端 到 端 测试 (e2e test) ， 也 称 为 场景 测试 ， 它 模拟 的 是 用 户 真 实 的 操作 场景 : 
* 用户 打开 http://xxx 地 址 。 
“ 在 搜索 框 中 输入 了 abc。 


“ 然后 点 击 其 后 的 搜索 按钮 。 


这 时 候 ， 他 期 望 看 到 一 个 列表 ， 列 出 所 有 在 标题 的 任意 位 置 包 含 了 字符 串 abc 的 条 目 ， 并 且 每 条 结果 中 的 abc 这 三 个 字母 被 高 亮 。 


所 谓 端 到 端 


， 也 就 是 一 端 是 浏览 器 ， 另 一 端 是 服务 器 ， 这 个 测试 贯通 了 


SF 


端 到 端 测试 不 是 什么 新 技术 ， 它 在 前 后 端 分 离 架构 盛行 之 前 就 已 经 被 广泛 采 


Angular 的 端 到 端 


dl 


测试 工具 称 为 Protractor， 事 实 上 


我 的 建议 是 ， 
前 端 技术 栈 而 被 


除非 你 所 在 的 开发 组 织 已 经 把 Angular 作 为 唯一 的 前 端 选项 


在 我 的 工程 实践 中 ， 只 会 使 
如 果 写 测试 的 人 员 有 权 修改 源码 ， 


这 里 不 展开 讲解 ， 只 把 我 在 种 子 工程 中 写 的 一 些 代码 加 上 注释 供 大 家 自行 研究 : 


1) pages/HomePage.js 


了 ， 比 如 Selenium， 而 


前 后 端 ， 具 有 近似 于 验收 测试 的 价值 。 


否则 请 使 用 Selenium 中 传统 的 函数 ， 而 不 要 使 用 Protractor 特 有 的 根据 ng-model 选 取 元 素 等 函数 ， 这 ， 


Selenium 也 同样 可 应 用 于 Angular 中 。 


它 就 是 基于 Selenium 的 ， 在 Selenium 的 基础 上 ， 它 增加 了 一 些 Angular 特 有 的 元 素 选取 方式 ， 如 根据 ng-model 选 取 元 素 等 。 


id、class 等 少数 查阅 方式 ， 而 不 会 根据 ng-model 等 进行 查阅 。 并 且 ， 由 于 Angular 的 特点 ， 被 测试 程序 中 可 以 不 F 
那么 他 /她 可 以 自由 的 添加 、 删 除 id， 而 不 用 担心 破坏 了 程序 的 逻辑 和 样式 。 遵 循 这 个 


任何 jd， 所 以 ， 我 们 可 以 完全 把 id 留 给 测试 人 员 使 


约定 ， 可 以 让 开发 与 测试 的 协同 更 加 有 效 。 


将 让 你 们 的 测试 独立 于 


// 这 是 一 个 页 面 对 象 ， 用 来 封装 页 面 中 的 元 素 和 操作 ， 
module .exports = function() { 
this.title = function() { 

// browser 对 象 封 装 一 组 用 来 访问 


return browser.getTitle () 7 


浏览 器 属性 的 函数 


] 
// 根据 id 查找 元 素 
this.name = element (by.id('name')) 7 
this.nameEcho = element (by.id('name-echo')); 
this.get = function() { 

// 控制 浏览 器 访问 特定 地 址 

browser.get ('http://localhost:5000/#/"') 


}; 


以 简化 规约 代码 ， 并 提供 一 定 的 变更 隔离 


2) demoSpec.js 


// 取得 页 面 对 象 


var HomePage = require('./pages/HomePage'); 
describe ('e2e 范 例 ， 如 果 修 改 了 首页 ， 请 修改 本 测试 >'，function () { 


Var homePage; 
// 所 有 测试 语句 执行 之 前 ， 0 
beforeEach (function () 
homePage = new te bee 
homePage.get (); 
Hs 


让 (5 默认 的 标题 是 Showcase!，function() { 

expect (homePage .title() ) .toBe ('Showcase'); 
ys 
it(' 输 入 用 户 名 后 应 该 回 显 '，function() { 


// 检查 初始 状态 是 否 符合 预期 

expect (homePage .nameEcho .getText () ) .toBe ('Hello, '); 

// 模拟 用 户 输入 

homePage .name.sendKeys ('test'); 

// 检查 操作 后 状态 是 否 符合 预期 

expect (homePage .nameEcho .getText () ) .toBe ('Hello,test')7 
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一 了 


草 


背后 的 原理 


在 上 一 章 ， 我 们 讲解 了 Angular 的 几 个 核心 概念 ， 以 及 它们 的 一 小 部 分 工作 原理 。 这 是 进 阶 的 第 一 步 。 


但 是 ， 你 可 能 仍然 会 感到 困惑 


本 章 就 来 回答 这 些 问题 。 


3.1 Angular 中 的 MVVM 模 式 


在 开始 介绍 Angular 原 理 之 前 ， 我 们 有 必要 先 了 解 下 MVVM 模 式 在 Angular 中 的 运用 。 


: 在 各 种 场景 下 ， 这 些 概念 之 间 是 如 何 配合 的 ”在 实际 开发 中 ， 除 了 与 这 些 核心 概念 有 关 的 之 外 ， 还 有 哪些 很 
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虽然 Angular 社 区 一 直 将 Angular 称 为 前 端 MVC 框 架 ， 


要 的 原理 ? 


同时 Angular 团 队 也 称 它 为 MVW (Whatever) 框架 ， 但 


Angular 框 架 整 体 上 更 接近 MVVM 模 式 。 下 面 是 lgor Minar 发 布 在 Google+ (https://plus.google.com/+lgorMinar/posts/DRUAkZmXjNV) 的 文章 内 容 : 


MVCvs MVVM vs MVP.What a controversial topic that many developers can spend houts and hours debating and arguing about. 


MVC、MVVM、MVP， 这 个 容 


易 引 起 争议 的 话题 可 以 让 很 多 开发 者 花费 大 量 时 间 在 上 面 辩 论 和 争论 。 


For several yeats Angular]S was closer to MVC (or rather one of its client-side variants) ，but ovet time and thanks to many refactorings and api improvements, it” snow closer to MVVM - the$scope object could be 


considered the ViewModel that is being decorated by a function that we call a Controller. 


连续 数 年 ，Angular]S 更 接近 MVC 或 者 说 它 是 在 容 户 端的 一 种 变 体 ， 但 是 ， 随 着 时 间 的 过 去 ， 经 过 许多 重 构 和 API 改 进 ， 它 现在 更 接近 MVVM 模 式 


ViewModel。 


$scope 对 象 可 以 看 做 是 被 Conttoller 函 数 装饰 的 


Being able to categotize a framewotk and put it into one of the MV*buckets has some advantages.It can help developers get mote comfortable with its apis by making it easier to create a mental model that represents the 


application that is being built with the framework.It can also help to establish terminology that is used by developers. 


一 个 框架 能 够 被 归 类 并 且 放 入 其 中 一 种 MV* 的 桶 中 是 有 一 些 好 处 的 。 它 能 够 帮助 开发 者 更 容易 的 创建 一 个 代表 用 该 框架 创建 的 应 用 程序 的 心理 模型 ， 并 且 对 它 的 API 感 到 更 舒服 。 它 也 能 帮助 建立 开发 者 
常用 的 术语 。 


Having said, 1” d rather see developers build kick-ass apps that ate well-designed and follow separation of concerns, than see them waste time arguing about MV*nonsense.And for this reason, TI hereby declare AngularJS 


to be MVW framework-Model-View-Whatever.Where Whatevet stands for"whatever works for you". 


我 已 经 说 过 ， 比 起 开发 者 浪费 很 多 时 间 争 论 MV# 的 思春 行为 ， 我 更 愿意 看 到 他 们 开发 一 些 关注 点 分 离 并 且 有 良好 设计 的 强大 应 用 。 由 于 这 个 原因 ， 我 特此 声明 ，AngularJS 是 一 个 MVW 框 架 一 一 Model- 


View-Whatever。 这 里 ，“ 无 论 什么 ”表示 “无 论 什 么 适合 你 的 ”。 


Angular gives you a lot of flexibility to nicely separate presentation logic from business logic and presentation state.Please use it fuel your productivity and application maintainability rather than heated discussions about things 


that at the end of the day don't matter that much. 
Angular 很 好 的 灵活 性 让 你 可 以 很 好 地 将 表现 层 远 辑 、 业 务 逻 辑 以 及 表现 层 状态 分 离 。 请 用 它 作为 提高 你 生产 率 和 应 用 可 维护 行 的 燃料 ， 而 不 是 成 为 激烈 讨论 而 在 一 天 结束 的 时 候 又 不 那么 重要 的 事情 。 


这 篇 文章 中 强调 : Angular 经 过 多 次 的 API 重 构 和 改进 ， 越 来 越 接近 于 MVVM 模 式 。$scope 可 以 看 做 ViewModel， 而 Controller 则 是 装饰 、 加 工 处 理 这 个 ViewModel 的 Javascript 函 数 。 作 者 希望 大 家 
更 关注 “如 何 实现 一 个 成 功 的 ， 具 有 好 的 设计 以 及 遵循 “分 离 关 注 点 ”原则 的 应 用 程序 ” ， 而 不 是 去 争论 MV*， 所 以 他 将 Angular 称 为 MVW 框 架 以 平息 争论 : 是 什么 并 不 重要 ， 只 要 适合 你 的 应 用 就 行 。 


MVVM 模 式 是 Model-View-ViewModel (模型 -视图 -视图 模型 ) 模式 的 简称 ， 最 早出 现在 微软 的 WPF 和 SilverLight 框 架 中 。MVVM 模 式 利用 框架 内 置 的 双向 绑 定 技术 对 MVP (Model-View- 
Presenter) 模式 变型 ， 它 引入 了 专门 的 ViewModel (视图 模型 ) 来 “ 粘 合 ”View 和 Model， 让 View 和 Model 进 一 步 分 离 和 解 耦 。MVVM 模 式 的 优势 有 如 下 四 点 : 


. 低 耦 合 : View 可 以 独立 于 Model 变 化 和 修改 ， 同 一 个 ViewModel 可 以 被 多 个 View 复 用 ; 并 且 可 以 做 到 View 和 Model 的 变化 互 不 影响 。 
“ 可 重用 性 : 可 以 把 一 些 视图 的 逻辑 放 在 ViewModel， 让 多 个 View 复 用 。 

“ 独立 开发 : 开发 人 员 可 以 专注 于 业务 逻辑 和 数据 的 开发 (ViewModel) ， 界 面 设计 人 员 可 以 专注 于 UI (View) 的 设计 。 

: 可 测试 性 : 清晰 的 View 分 层 ， 使 得 针对 表现 层 业 务 逻辑 的 测试 更 容易 ， 更 简单 。 


图 3-1 是 Angular 中 关于 MVVM 模 式 的 运用 。 


Controller 


加 载 ， 处 理 器 


通知 -$digest 


View 双向 绑 定 -ngModel ViewModel 
声明 式 模板 pssishsbstsbsbsisirisishs $scope ”加 交 汪 和 二 


Command-ngClick 更 新 


图 3-1 MVVM 模 式 
在 Angular 中 MVVM 模 式 主要 分 为 四 部 分 : 
:View: 它 专注 于 界面 的 显示 和 泻 染 ， 在 Angulat 中 则 是 包含 一 堆 声 明 式 Directive 的 视图 模板 。 


“ ViewModel: 它 是 View 和 Model 的 粘 合体 ， 负 责 View 和 Model 的 交互 与 协作 ， 它 负责 给 View 提 供 显 示 的 数据 ， 以 及 供 View 操 作 Model 的 途径 。 在 Angular 中 $scope 对 象 充 当 了 这 个 ViewModel 的 角 
色 ，ViewModel 上 有 两 种 不 同 来 源 的 数据 : 一 种 是 展示 信息 的 业务 数据 ， 另 一 种 是 描述 交互 的 派生 数据 ， 如 : 表格 中 的 复 选 框 ， 如 果 点 击 “ 全 选 ” 则 会 选中 所 有 列表 中 的 复 选 框 ， 在 这 里 就 需要 一 个 类 
似 “isSelectAll” 的 派生 数据 被 放置 在 ViewModel 上 。 


“ Model: 它 是 与 业务 远 辑 相关 的 数据 封装 载体 ， 也 就 是 领域 对 象 。Model 并 不 关心 自己 会 被 如 何 显 示 或 操作 ， 也 就 不 应 该 包含 任何 与 界面 显示 有 关 的 逻辑 。 在 Web 页 面 中 ， 大 部 分 Model 都 是 来 自 Ajax 的 
服务 端 返回 数据 或 者 全 局 配置 对 象 。Angular 中 的 Service 正 是 封装 和 处 理 这 些 与 Model 相 关 的 业务 逻辑 的 最 佳 方式 ， 这 些 领域 对 象 可 以 被 Controller 或 其 他 Setrvice 复 用 。 


“ Controller: 这 并 不 是 MVVM 模 式 中 的 核心 元 素 ， 但 它 负 责 ViewModel 对 象 的 初始 化 。 它 将 调用 一 个 或 者 多 个 Service 来 获取 领域 对 象 ， 并 把 结果 放 在 ViewModel 对 象 上 。 这 样 ， 应 用 界面 在 启动 加 载 时 
候 ， 就 可 以 达到 一 种 最 初 的 可 用 状态 。 它 还 可 以 在 ViewModel 上 加 入 用 于 描述 交互 的 行为 函数 ， 如 用 于 响应 ng-click 事 件 的 “addItemToShopCar () ; ”等 。 


View 不 能 直接 与 Model 交 互 ， 而 是 通过 $scope 这 个 ViewModel 来 实现 与 Model 的 交互 。 


对 于 表单 的 输入 ， 则 需要 通过 ngModel 指 令 来 实现 View 和 ViewModel 的 同步 。ngModelController 包 含 $parsers 和 $formatters 两 个 转换 器 管道 ， 它 们 分 别 实现 从 View 表 单 输入 到 Model 数 据 的 转换 


和 从 Model 数 据 到 View 表 单数 据 的 格式 化 。 对 于 用 户 界面 的 交互 事件 (如 ngClick、ngChange 等 ) 则 会 转发 到 ViewModel 对 象 上 ， 通 过 ViewModel 上 的 行为 函数 来 更 改 Model 的 数据 。 


对 于 Model 的 改变 ， 也 会 反应 在 ViewModel 之 上 ， 然 后 通过 $scope 的 “ 脏 检查 机 制 ” ($digest) 更 新 到 View， 从 而 实现 View 和 Model 的 分 离 。 


这 就 是 MVVM 模 式 对 前 端 逻 辑 实现 清晰 分 层 的 原理 。 


MVVM 模 式 的 要 点 是 : 以 领域 对 象 (Domain Model) 为 中 心 ， 遵 循 “分 离 关 注 点 ”设计 原则 。 这 也 是 Angular 的 模型 驱动 思维 与 jQuery 的 DOM 驱 动 思维 的 显著 差异 。 所 以 我 们 在 做 Angular 开 发 的 


1. 绝 不 要 先 设计 你 的 页 面 ， 然 后 用 DOM 操 作 去 改变 它 


在 以 往 的 jQuery 开发 中 ,我 们 会 首先 设计 页 面 DOM 结 构 ， 然 后 再 利用 jQuery 来 改变 DOM 结 构 或 者 实现 动态 交互 效果 。 由 于 jQuery 是 为 DOM 驱 动 而 设计 的 ， 所 以 对 于 拥有 复杂 交互 逻辑 的 项 
目 ，JavaScript 代 码 会 变 得 越 来 越 腔 有 种 ， 让 交互 逻辑 分 散 到 各 处 。 


而 Angular 是 MVVM 的 ， 在 Angular 开 发 中 ， 我 们 要 始终 在 脑子 里 挂 着 Model 的 弦 。 不 能 老 想 着 “我 有 XXX 这 个 DOM ， 我 要 让 它 做 XXX 变化 ” ， 而 应 该 先 思考 我 们 拥有 或 需要 怎么 样 的 Model 数 据 
后 设计 我 们 的 交互 数据 和 交互 逻辑 ， 最 后 才 去 实现 视图 ， 并 用 $scope 来 粘 合 它们 。 


2. 指 令 不 是 封装 jQuery 代码 的 “天 堂 ” 


如 上 所 述 ， 我 们 不 能 一 开始 就 想 着 如 何 利用 DOM 操 作 的 方法 去 实现 应 用 目标 ， 然 后 “冠冕 堂皇 ”的 写 上 一 堆 jQuery 的 代码 ， 并 将 其 封装 到 Angular 的 指令 中 ， 最 后 不 得 不 加 上 $scope.$apply () 来 通 
知 Angular 你 的 ViewModel 已 经 改变 了 ， 需 要 启动 “ 脏 检查 机 制 ” 来 更 新 你 的 改变 到 View。 


笔者 曾 在 多 个 客户 项 目 中 见 到 这 种 将 指令 作为 封装 jQuery 代码 “天 堂 ” 的 例子 。 其 实 ， 对 于 这 类 需求 ， 大 部 分 情况 下 我 们 都 可 以 用 少量 Angular 代 码 将 其 重 构 为 真正 的 Angular way。 在 Angular 社 


也 经 常 看 见 在 Angular 指 令 中 利用 Query 的 on 方法 绑 定 click、keydown、blur 等 事件 的 代码 ， 大 部 分 情况 我 们 都 能 以 对 应 的 ng 事件 ， 如 ngClick、ngChange、ngBlur 来 重 构 它们 。 


内 
于 


总 之 ， 我 们 应 该 尽量 尝试 复 用 Angular 的 内 置 指令 ， 以 真正 的 Angular 方 式 来 思考 我 们 的 问题 ， 避 免 引 入 jQuery 的 DOM 方 法 和 操作 。 


关于 Angular MVVM 模 式 的 资料 ， 你 还 可 以 参考 视频 : https://frontendmasters.com/coursesangularjs-mvc-mvvm-mvwhatever#v=ypur7bfbcq。 


3.2 ”Angular 启 动 过 程 


在 Angular 官 方 提供 的 开发 指南 中 ， 有 一 张 医 
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图 3-2 Angular 启 动 过 程 


这 张 图 所 展示 的 就 是 Angular 的 启动 流程 。 


在 本 节 ， 我 将 据 此 展开 ， 深 入 讲解 这 张 图 中 省 略 掉 的 步骤 。 读 者 可 以 参照 Angular 1.2 的 源码 来 加 深 理解 。 


1. 浏 览 器 下 载 HTML/CSS/JavaScript 等 


当 你 转 到 一 个 页 面 地 址 后 ， 浏 览 器 首先 会 去 下 载 这 个 HTML 文 件 。 在 下 载 HTML 的 同时 ， 它 会 开启 一 些 辅 助 线程 下 载 所 关联 到 的 其 他 文件 ， 如 script 标 签 、link 标 签 等 。 


2. 浏 览 器 开始 构建 DOM 树 
在 下 载 文 件 的 同时 ， 浏 览 器 就 会 开始 构建 DOM 树 。 这 时 候 ， 如 果 网 速 慢 ， 我 们 会 看 到 页 面 上 只 出 现 了 一 部 分 DOM。 同 时 ， 在 这 部 分 DOM 中 内 嵌 或 引入 的 脚本 也 会 开始 执行 。 


3jQuery 初 始 化 


这 些 引 入 脚本 中 有 一 个 是 jQuery (或 内 谋 在 Angularjs 中 的 jQLite) ， 它 的 启动 代码 会 给 自己 挂 接 上 document 对 象 的 DOMContentLoaded 事 件 ， 我 们 的 程序 则 会 通过 调用 jQuery.ready (callback) 
把 一 个 回调 函数 注册 到 这 个 事件 中 。 但 是 这 个 回调 函数 的 代码 还 要 等 一 会 儿 才 会 执行 ， 在 此 之 前 ， 还 有 更 多 的 脚本 需要 加 载 。 


注意 ， 如 果 在 Angular 脚 本 之 前 引入 了 jQuery 脚本 ， 则 Angular 会 使 用 Query 的 API， 即 angular.element( “Selector ) === $( “selector )。 否 则 ，Angular 将 启用 其 内 置 的 jQLite。 


4.Angular 初 始 化 


这 些 引 用 脚本 中 的 另外 一 些 是 Angular 及 其 子 模块 (module) ， 也 包括 我 们 的 程序 和 第 三 方 模块 。 这 时 候 它们 会 按 引入 顺序 开始 它们 的 初始 化 过 程 。 


各 种 Angular 模 块 的 初始 化 过 程 大 致 相同 ， 包 括 Angular 内 置 的 名 为 “ng” 的 模块 。 初 始 化 的 步 又 是 : 


1) 按 名 字 创 建 一 个 模块 ， 所 谓 模块 就 是 一 个 对 象 ， 它 是 其 他 Angular 对 象 的 注册 表 。 


2) 在 这 个 模块 中 注册 各 种 Angular 对 象 ， 如 Controller、Service、Directive 等 。 我 们 常见 的 myModule.controller ('xxx'，http://www.hzcourse.com/resource/readBook? 
path=/openresources/teach_ ebook/uncompressed/15538/OEBPS/Text/...) 其 实 就 是 $controllerProvider.register 的 快捷 方式 ; 


myModule.service ('xxx', http://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/15538/OEBPS/Text/.….) 就 是 $provide.service 的 快捷 方 
式 ，myModule.directive ('xxx', http://www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/15538/OEBPS/Text/...) 就 是 gcompileProvider.directive 的 


快捷 方式 。 


这 些 元 素 注册 进去 之 后 ， 就 会 形成 一 个 由 


回调 函数 组 成 的 对 照 表 。 但 是 这 些 回调 函数 现在 还 不 会 开始 执行 。 


在 这 个 模块 中 注册 “config 回 调 函数 ”， 它 将 在 模块 刚刚 被 初始 化 时 执行 ， 这 在 后 续 的 步骤 会 提 到 。 


在 这 个 模块 中 注册 “run 回 调 函数 ”， 它 将 在 模块 初始 化 完毕 时 执行 ， 这 在 后 面 的 步骤 会 提 到 。 


注意 ， 这 里 的 第 2、3、4、5 步 其 实 可 以 按 任意 顺序 执行 ， 


5jQuery 启 动 


为 这 里 只 是 在 注册 回调 函数 ， 而 不 会 执行 它们 。 


等 到 页 面 及 其 直接 引用 的 js 文件 都 下 载 完 毕 时 ，DOM 也 构建 完毕 了 ， 这 时 候 浏览 器 会 触发 document 对 象 的 DOMContentLoaded 事 件 。 我 们 在 jQuery.ready 中 注册 的 回调 函数 也 会 被 调用 。 在 这 个 函 


数 中 ， 会 执行 Angular 的 启动 代码 。 


6.Angular 启 动 


我 们 在 前 面 注册 了 各 种 Angular 回 调 函 数 ， 但 是 它们 都 没有 执行 ， 从 这 个 步骤 开始 ， 它 们 就 将 开始 被 逐个 执行 了 。 


Angular 登 场 后 的 第 一 件 事 ， 就 是 查找 一 个 带 有 ng-app (或 其 等 价 形式 data-ng-app/ng: app/x-ng-app) 指令 的 节点 。 这 个 指令 通常 会 出 现在 body 或 htm| 元 素 中 ， 但 是 也 可 以 出 现在 任意 节点 上 ， 


甚至 可 以 把 多 个 Angular 程 序 嵌 入 到 同一 个 页 面 中 。 


接 下 来 ，Angular 会 找到 “第 一 个 ” 带 有 ng-app 的 节点 ,并 


app="moduleName" 中 指定 的 值 。 


调用 angular.bootstrap (element，moduleName) ， 这 里 的 element 就 是 这 个 带 有 ng-app 的 节点 ， 而 moduleName 就 是 ng- 


注意 ，Angular 的 自动 启动 方式 ， 只 会 启用 第 一 个 ng-app 的 module。 对 于 多 个 ng-app 启 动 方式 ， 必 须 采 用 手动 angular.bootstrap 方 式 来 启动 。 当 然 ， 在 页 面 中 仅 使 用 一 个 ng-app 是 更 推荐 的 方式 ， 


然后 以 Module 和 Controller 来 划 为 页 面 。 


7. 加 载 子 模 块 


在 Angular 把 模块 和 DOM 节 点 关 
成 “ 活 ” 的 一 一 具有 双向 绑 定 功能 ， 能 


在 这 个 阶段 ，Angular 会 首先 创建 
所 关联 的 模块 ， 以 及 它 所 依赖 的 模块 进行 初始 化 。 这 时 候 ， 前 


注意 ， 前 面 注册 的 大 多 数 的 对 象 都 尚未 就 绪 ， 


8. 启 动 子 模块 


9, 演 染 页 生 


路 由 模块 会 先 创建 一 个 Scope 对 象 ， 并 且 加 载 模板 ， 加 载 完 毕 
Scope 对 象 和 DOM 树 关联 起 来 ， 包 括 演 染 内 容 的 函数 和 进 


10 数据 绑 定 与 摘要 循环 


这 时 候 ， 页 面 已 经 显示 出 来 了 ， 但 是 其 数 


隘 起 来 之 前 ， 这 些 DOM 是 “ 死 ” 的 ， 它 们 和 数据 模型 之 间 还 没有 建立 任何 关联 ， 因 此 无 法 反应 数据 模型 的 变动 。 前 面 都 是 准备 工作 ， 到 了 这 一 步 才 会 开始 把 它们 变 
展示 数据 ， 能 响应 对 


有 件 等 等 。 


一 个 注入 器 (injector) ， 并 且 把 它 关联 到 所 在 的 节点 上 。 我 们 在 前 面 注册 的 那 一 大 堆 Angular 对 象 ， 都 需要 通过 注入 器 才能 被 其 他 代码 使 用 。 接 下 来 ， 会 对 当前 节点 


面 注册 的 所 有 “config 回 调 函 数 ” 都 会 被 顺序 执行 。 


模块 加 载 完毕 之 后 ， 会 执行 所 有 的 “run 回 
的 URL， 然 后 根据 这 个 URL 查 找 相应 的 “模板 上 


调 函 数 ”， 在 这 个 阶段 ， 各 种 Angular 对 象 都 可 以 使 用 了 ， 包 括 各 种 Service、Factory 等 。 接 下 来 ， 路 由 模块 会 获得 控制 权 ， 使 用 $location 服 务 解 析 当 前 页 面 
控制 器 ”对 ， 来 准备 泻 染 一 个 页 面 。 


。 在 config 回 调 函 数 中 能 够 使 用 的 只 有 注册 的 常量 (Constant) 对 象 和 Provider 类 。 这 个 阶段 也 是 程序 中 唯一 可 以 直接 访问 Provider 类 对 服 
务 进行 配置 的 地 方 。 比 如 路 由 服务 的 Provider 就 是 在 这 个 阶段 进行 初始 化 ， 但 是 它 只 负责 记录 一 个 URL 到 “模板 /控制 器 ”组 的 映射 表 ， 供 后 面 的 步骤 使 用 。 


后 把 它 的 内 容 传 给 $compile 对 象 。 $compile 会 先 把 它 解 析 成 一 个 静态 DOM 树 ， 然 后 逐个 扫描 这 棵 DOM 树 中 的 指令 ， 通 过 这 些 指令 把 


有 件 处 理 的 函数 。 最 后 用 它 蔡 换 一 个 特定 指令 所 在 的 节点 ， 在 ngRoute 中 是 带 有 ng-view 的 节点 ， 在 angular-ui-router 中 则 是 带 有 ui-view 的 节 


居 还 没有 被 泻 染 ，Angular 会 自动 使 用 scope 中 的 数据 泻 染 一 遍 。 


但 是 ， 如 果 用 户 修改 了 这 些 数据 会 怎样 ?显然 ， 它 们 也 应 该 泻 染 出 来 。 问 题 的 关键 是 : 什么 时 候 泻 染 ， 怎 么 才能 做 到 既 及 时 又 高 效 。 这 就 涉及 Angular 中 的 一 个 重要 机 制 : 脏 检查 机 制 。 简 单 地 


说 ，Angular 会 给 每 一 个 Scope 成 员 变量 : 


就 会 更 新 界面 ， 这 个 过 程 称 为 摘要 循环 。 不 过 


但 即使 是 $apply 函 数 也 很 少 需 


为 在 各 种 Angular 事 件 指令 以 及 $timeout 等 服务 中 ， 都 会 自动 调 


求 出 一 个 摘要 值 (能 够 唯一 标识 一 个 变量 ) ， 并 且 保 存在 一 个 变量 中 。 当 调用 Scope 对 象 的 $gdigest/$apply 方 法 的 时 候 ， 会 重新 算 一 遍 摘要 值 ， 只 要 数据 变化 了 ， 它 
，$digest 函 数 是 不 需要 应 用 程序 自己 调用 的 ，$apply 是 对 它 的 包装 。 


它 一 次 来 确保 界面 刷新 。 如 果 你 要 自己 挂 接 第 三 方 组 件 的 事件 ， 那 么 就 要 记得 调用 一 次 


4$apply 了 ， 否 则 在 这 个 事件 处 理 函 数 中 对 scope 变 量 的 更 新 就 不 会 更 新 到 界面 上 。 


我 们 在 后 面 3.4 节 专门 详解 “ 脏 检查 机 制 “ 


至 此 ， 一 个 典型 的 Angular 程 序 就 启动 成 功 了 。 


3.3 ”依赖 注入 


依赖 注入 的 英文 是 Dependency Injection， 简 称 DI。 


对 于 后 端 程序 员 ， 特 别 是 Java 程 序 员 来 说 ，D| 是 个 无 须 解释 的 概念 ， 但 是 对 前 端 程序 员 则 比较 陌生 。 


在 本 节 中 ， 我 先 简要 说 一 下 DI 的 概 


JavaScript 实 现 DI 的 原理 ， 最 后 讲 讲 Angular 中 的 DI。 


3.4” 脏 检查 机 制 


“ 脏 检查 ”是 Angular 中 的 核心 机 制 之 一 ， 它 是 实现 双向 绑 定 、MVVM 模 式 的 重要 基础 。 


一 句 话 来 概括 “ 脏 检查 机 制 ”: Angular 将 双向 绑 定 转换 为 一 堆 watch 表 达 式 ， 然 后 递归 检查 这 些 watch 表 达 式 的 结果 是 否 变 了 ， 如 果 变 了 ， 则 执行 相应 的 watcher 函 数 。 等 到 Model 的 值 不 再 变化 ， 
也 就 不 会 再 有 watcher 函 数 被 触发 ， 一 个 完整 的 digest 循 环 就 结束 了 。 这 时 ， 浏 览 器 就 会 重新 泻 染 DOM 来 体现 model 的 改变 。 这 里 所 说 的 watcher 函 数 ， 是 由 View 上 的 指令 (如 ngBind、ngShow、 
ngHide 等 ) 或 {人 j 表 达 式 (严格 来 说 是 $compile 服 务 ) 所 注册 的 。 指 令 在 Angular 的 compile 阶 段 会 被 逐一 解析 、 注 册 。 


3.5 ”指令 的 生命 周期 


指令 (Directive) 是 Angular 中 提出 的 新 概念 ， 它 是 为 HTML 提 供 了 DSL (特定 领域 语言 ) 的 扩展 语法 ， 并 激发 了 我 们 对 组 件 化 (Web Component) 的 进一步 思考 。 


指令 也 是 Angular 中 学 习 难 度 最 大 的 概念 之 一 。 要 想 更 好 地 理解 指令 这 个 概念 ， 我 们 应 该 先 了 解 清 楚 指 令 的 生命 周期 。 在 Angular 中 ， 一 个 指令 从 开始 解析 到 生效 ， 一 共 会 经 历 Inject、Compile、 
Controller 加 载 、pre-link、post-link 这 几 个 主要 阶段 。 


以 下 面 的 指令 为 例 : 


angular.module ('com.ngnice.app') .directive('directiveLife', function($lo0g) { 
$l1og.info('Injecting function directiveLife'); 
return { 
restrict: 'EA', 
transclude: true, 
replace: true, 
template: '<div><h2>count :{{count}}</h2><p ng-transclude></p></div>', 
scope: { 
count: '=" 
}, 


compile: function(elm, iAttrs) { 


$1l0g.info('compile', 'count value from attribute : ! + iAttrs.count); 
return { 
pre: function(scope, elm, iAttrs) { 
$1log.info('pre-link', 'count value from attribute : ' + iAttrs.count, 'count value from scope : ' + scope.count); 


1 
post: function(scope, elm, iAttrs) { 
$log.info('post-link', 'count value from attribute : ' + iAttrs.count, 'count value from scope : ' + scope.count); 
} 
}; 
}, 
controller: function($scope) { 
$1log.info('controller', "count value from controller : ' + $scope.count); 
} 
i 
]) 
angular.module ('com.ngnice.app') .controller ('DemoController'，function() { 
var wm = this; 
return vm; 


Ns 


在 这 里 创建 了 一 个 名 为 directiveLife 的 Angular 指 令 ， 它 带 有 一 个 count 属 性 ,我 们 的 指令 将 用 它 来 区 分 不 同 的 指令 实例 。 它 同时 也 是 一 个 Angular 的 ngTransclude 指 令 ， 这 是 为 了 能 够 实现 指令 的 嵌 套 
而 创建 的 ， 方 便 后 面 关于 pre-link 和 post-link 的 执行 顺序 演示 。directiveLife 是 一 个 纯粹 的 教学 指令 ， 并 不 具有 任何 实用 价值 ， 只 会 输出 一 堆 日 志 信息 ， 帮 助 我 们 跟踪 Angular 中 指令 的 执行 顺序 。 


首先 尝试 运行 这 个 指令 。 我 们 可 以 利用 单个 指令 ， 来 理解 它们 之 间 的 执行 顺序 和 作 


<body ng-controller="DemoController as demo"> 
<div id="directiveLife"> 
<directive-life count="1"> 
</directive-life> 
</div> 
</body> 


我 们 可 以 从 Chrome 控 制 台 看 见 输出 日 志 信 息 为 : 


Injecting function directiveLife 

compile count value from attribute : 1 

controller count value from controller : 1 

pre-link count value from attribute : 1 count value from scope : 1 
post-link count value from attribute : 1 count value from scope : 1 


从 上 面 的 日 志 信 息 中 ,我 们 可 以 看 出 它们 的 执行 顺序 为 : Injecting、compile、controller、pre-link、post-link， 这 几 个 阶段 承担 了 不 同 的 功能 。 下 面 就 分 别 介绍 这 几 个 指令 。 


3.6 Angular 中 的 $parse、$eval 和 $observe、$watch 


在 Angular 的 源码 中 ， 我 们 会 看 见 很 多 地 方 用 到 了 $parse/$eval 或 $observe/$watch。 如 果 我 们 准备 写 一 个 比较 复杂 的 指令 ， 就 应 该 清楚 它们 的 用 途 和 


区 
Rn 


3.7 "REST 


REST 是 一 种 架构 风格 。 全 称 是 “ 表 观 状态 转移 ” (Representational State Transfer) ， 也 就 是 说 ， 以 资源 为 中 心 ， 通 过 调用 AP1， 使 这 个 资源 从 一 个 状态 迁移 到 另 一 个 状态 。 如 果 以 前 学 过 状态 
会 比较 容易 理解 这 个 概念 。 


[ 


与 REST 相 对 的 风格 是 RPC (远程 方法 调用 ) 风格 ， 也 就 是 以 前 常用 的 接口 风格 ， 它 们 各 有 优 缺 点 ， 但 REST 正 越 来 越 流 行 于 编程 领域 ， 特 别 是 互联 网 编程 领域 。 


接 下 来 ， 我 们 将 对 REST 进 行 深入 解析 ， 探 索 它 的 要 点 、 设 计 原 理 以 及 优 缺 点 。 


3.8 ” 跨 域 


在 前 后 端 分 离 架构 下 ， 难 免 会 遇 到 跨 域 问题 。 但 是 对 于 跨 域 ， 很 多 人 并 没有 多 么 深入 的 了 解 。 这 里 我 就 详细 讲 一 下 这 个 问题 。 


3.9 ”前 端 安全 技术 


3.9.1 前 端 攻击 的 基本 原理 和 类 型 


前 端 攻 击 的 分 类 方式 有 很 多 种 ， 我 们 只 根据 所 使 用 的 技术 原理 来 简略 讲 一 下 。 


1. 跨 站 脚本 一 一 XSS 


Cross Site Script (简称 XSS) 意 为 跨 站 脚本 。 也 就 是 攻击 者 用 某 种 方式 在 站 点 中 注入 一 段 JavaScript 脚 本 ， 这 段 脚本 中 含有 攻击 代码 ， 由 于 它 运 行 在 站 点 本 身 的 域 ， 因 此 浏览 器 的 域 隔离 策略 没有 效 
果 。 注 入 脚本 是 这 种 攻击 的 关键 ， 在 传统 的 后 端 程序 中 ， 是 通过 对 来 自用 户 的 数据 进行 转 码 (Encoding) 来 解决 的 ， 但 是 前 端 程序 中 就 简单 多 了 。 


正如 我 们 在 SQL 注 入 中 所 见 的 情况 一 样 ， 即 使 做 转 码 ， 也 仍然 难免 有 路 漏 ， 最 好 的 方式 是 利用 数据 库 本 身 的 功能 进行 参数 化 。 而 XSS 本 质 上 就 是 浏览 器 中 的 SQL 注 入 。 最 好 的 方式 是 使 用 浏览 器 本 身 的 功 
能 ， 而 不 要 自己 拼接 字符 串 。 


初 看 起 来 倒是 蛮 复 杂 的 ， 幸 运 的 是 ，Angular 已 经 做 好 了 这 一 切 。Angular 的 绑 定 表达 式 通过 直接 对 节点 的 innerText 属 性 赋值 来 更 新 绑 定 表达 式 ， 这 种 情况 下 ， 注 入 的 脚本 不 会 得 到 执行 的 机 会 。 仅 这 
一 点 就 已 经 防范 了 大 部 分 XSS 风 险 。 


但 是 ， 在 实际 应 用 中 ， 仍 然 有 一 些 情况 让 你 不 得 不 输出 HTML， 这 时 我 们 需要 通过 一 个 叫 作 “ 严 格 情境 转 义 (Strict Contextual Escaping， 简 称 SCE) 的 服务 来 对 其 中 的 危险 字符 串 进行 检测 ， 使 其 可 
以 被 安全 的 泻 染 出 来 。 


这 个 服务 的 名 称 叫 作 $sce， 它 有 一 系列 方法 : trustAsHtml、trustAsUrl、trustAs-ResourceUrl、trustAsjs 等 。 这 些 函 数 表 明 你 对 内 容 的 信任 范围 ， 如 果 内 容 中 有 超出 这 些 的 代码 ， 那 么 它 就 会 触发 异 
常 ， 导 致 绑 定 失败 ， 防 止 用 户 被 攻击 ， 比 如 在 trustAsUr| 的 内 容 中 出 现 了 HTML 代 码 ， 就 会 导致 绑 定 失败 。 


但 是 要 注意 ，trustAsHtml 和 trustAsJs 都 是 比较 宽松 的 内 容 信任 策略 ， 必 须 慎 用， 否则 仍然 可 能 导致 恶意 攻击 。 这 两 个 函数 不 够 安全 的 原因 是 $sce 内 置 的 信任 策略 是 整体 信任 策略 ， 如 果 我 们 希望 出 现 
HTML， 却 不 希望 其 中 嵌入 任何 脚本 (包括 href 中 的 JavaScript 脚 本 ) ， 那 么 内 置 的 策略 就 不 够 用 了 。 这 时 候 ， 我 们 需要 引入 Angular 中 的 一 个 可 选 模块 ， 它 叫 作 $sanitize (净化 ) 。 这 个 模块 没有 包含 在 
angularjs 中 ， 而 是 包含 在 angular-sanitizejs 中 ， 所 以 需要 额外 引入 它 ， 另 外 ， 需 要 加 入 它 的 模块 依赖 ngSanitize。 


$sanitize 净 化 服务 负责 对 ng-bind-html 的 内 容 进行 过 滤 ， 删 除 其 中 混入 的 脚本 ， 包 括 href 里 面 混入 的 利用 “javascript: ”协议 的 脚本 ， 如 <div onclick="alert (1) "> <a href="javascript: 
alert (1)">abc</a> </div> 会 被 净化 为 <div> <a>abc</a> </div>， 然 后 由 ng-bind-html 泻 染 。 这 个 过 程 对 使 用 者 是 透明 的 ， 只 要 引入 了 sanitize.js， 并 正确 添加 了 模块 依赖 ， 就 会 自动 生效 ,不 需要 
做 额外 的 配置 。 


有 时 候 我 们 并 不 想 过 滤 所 有 链接 ， 比 如 到 我 们 自己 的 帮助 网 站 的 链接 通常 可 以 认为 是 比较 安全 的 ， 我 们 可 以 单独 放行 它 。 在 $compileProvider 中 ， 有 两 个 配置 项 : aHrefSanitizationWhitelist 和 
imgSrcSanitizationWhitelist， 它 们 就 是 实现 上 述 功 能 的 白 名 单 ， 它 们 的 值 是 正则 表达 式 (如 果 不 懂 正 则 表达 式 ， 请 查阅 相关 文档 ) ， 也 就 是 说 ， 凡 是 能 匹配 这 两 个 正则 表达 式 的 地 址 被 认为 是 安全 的 。 


aHrefSanitizationWhitelist () 的 默认 值 是 /AN\s* (https? |ftplmailtoltellfile) : /， 也 就 是 说 ,使 用 http/https/ftp/mailto/tel/file 协 议 的 链接 (<a 
href=http://www.hzcourse.com/resource/readBook?path=/openresources/teach_ ebook/uncompressed/15538/OEBPS/Text/...) 不 会 被 过 滤 掉 。 


imgSrcSanitizationWhitelist () 的 默认 值 是 /^\s* ( (https? |ftplfile) : |data: imageV) /， 也 就 是 说 ,使 用 http/https/ftp/file/data: image 开 头 的 图 片 地 址 (<img 
src=http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/.….) 不 会 被 过 滤 掉 。 


如 果 要 对 它们 进行 配置 ， 可 以 传 入 新 的 正则 表达 式 作为 参数 ， 比 如 我 们 要 只 人 允许 链接 到 Google， 可 以 调用 $compileProvider.aHrefSanitizationWhitelist (/ANs*https:VAAw+.google.comW/) ， 这 
样 ， 只 人 允许 链接 到 Google 下 的 二 级 域名 ， 而 且 只 支持 https， 所 有 其 他 协议 和 网 址 都 会 被 过 滤 。imgSrcSanitizationWhitelist 也 是 同 理 。 


你 可 能 留意 到 ， 这 两 个 选项 是 Angular 核 心服 务 gcompileProvider 的 一 部 分 ， 所 以 它 不 仅 作 用 于 $sanitize 服 务 ， 也 同样 会 影响 到 在 指令 和 绑 定 表达 式 。 比 如 : 


当 <a ng-href= "{{someUr}j> 或 <a href="{fsomeUr 小 > 中 的 someUr 为 javascript: alert (1) 时 ， 绑 定 出 来 的 结果 是 <a href= "unsafe: javascript: 
alert (1) ">http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/..….</a>"， 从 而 阻止 lavaScript 被 执行 ， 这 有 效 阻止 了 基于 链接 
的 XSS 攻 击 。 


如 果 我 们 设置 了 aHref 的 白 名 单 为 https:/Nw+.google.com/， 那 么 ， 当 someUrl 不 能 匹配 白 名 单 时 ， 同 样 会 被 加 上 unsafe 前 缀 ， 如 <a href="unsafe: http://www.baidu.com/">。 通 过 这 种 方式 ， 
我 们 可 以 阻止 页 面 中 出 现 外 站 链接 ， 以 防范 “钓鱼 攻击 ”等 现象 的 发 生 。 


我 们 也 可 以 用 同样 的 方式 ， 通 过 设置 imgSrcSanitizationWhitelist 来 对 外 站 图 片 进行 unsafe: 处 理 。 


上 述 这 两 种 对 链接 和 图 片 的 unsafe: 处 理 ， 都 不 需要 sanitize 服 务 的 支持 。 


如 果 想 要 进一步 对 过 滤 逻 辑 进 行 完 全 控制 ， 那 么 可 以 自己 手动 过 滤 ， 然 后 把 过 滤 完 毕 的 HTML 传 给 ysce.trustAsHtml， 供 ng-bind-html 绑 定 ， 这 种 方式 ， 就 相当 于 告诉 Angular: “你 不 用 管 了 ， 相 信 
我 ! ”， 当 然 ，Angular 会 相信 你 ， 不 过 你 必须 承担 起 相应 的 责任 。 所 以 ， 除 非 你 有 充分 的 理由 和 足够 的 信心 ， 否 则 还 是 把 这 些 工作 交 给 Angular 的 内 置 安全 机 制 吧 。 


2. 跨 站 请 求 伪造 一 一 CSRF/XSRF 


Cross-site Request Forgery (简称 CSRF 或 XSRF) 意 为 跨 站 请 求 伪造 。 这 是 一 种 不 需要 脚本 的 攻击 方式 ， 比 如 WIKI 中 所 举 的 例子 : 


Mallory: Hello Alice! Look here: 
<img src="http://bank.example.com/withdraw?account=Alice&amount=1000000&for=Mallory"> 


当 Alice 浏 览 这 个 网 页 时 ， 就 会 有 一 个 请 求 发 给 某 个 疏 于 防范 的 银行 ， 从 她 的 当前 账户 中 取款 1000000 元 转 到 Mallory 的 账号 。 当 然 ， 既 然 是 个 疏 于 防范 的 银行 ， 它 必然 还 在 cookie 中 保存 了 Alice 的 登录 
信息 ， 所 以 ， 当 Alice 浏 览 这 个 页 面 时 一 一 注意 ， 她 还 没有 做 任何 点 击 之 类 的 操作 一 一 她 的 钱 就 已 经 没 了 。 


这 是 一 种 防不胜防 的 


改 击 方式 ， 它 不 需要 往 被 攻击 的 网 站 注入 脚本 ， 也 不 需 


黑 掉 受害 


这 种 方式 的 变种 是 使 


其 他 会 触发 


path=/openresources/teach _ ebook/uncompressed/15538/OEBPS/Text/...、 


path=/openresources/teac 


中 
此 领 奖 </a>。 


的 程序 却 可 以 很 轻松 地 生成 有 效 连 接 。 当 然 ， 如 果 攻 击 者 在 你 的 网 站 上 注入 了 一 个 脚本 ， 那 么 CSRF Token 仍 然 可 能 被 丛 


程 ， 只 要 任何 一 个 环节 存在 短 板 都 可 能 被 攻破 。 


要 想 手动 在 每 个 请 求 中 添加 CSRF 的 支持 是 比较 麻烦 的 。 不 过 ， 好 在 Angular 内 置 了 对 CSRF 的 支持 。 在 $http 以 及 
的 cookie 值 ， 然 后 把 它 放 到 请 求 头 X-XSRF-TOKEN 中 ， 


XSRF-TOKEN 


如 果 你 的 后 端 框架 发 


在 $http 的 请 求 对 象 中 ， 有 两 个 参数 xsrfCookieName 和 xsrfHeaderName 分 别 对 应 于 它们 的 自 定义 名 称 ， 比 如 我 们 要 改 为 MY-CSRF-TOKEN 和 X-MY-CSRF-TOKEN， 那 么 只 需 


$http: 


$http ({ 
url: 


Ds 


回 的 cookie 名 字 不 是 XSRF-TOKEN 或 所 期 望 | 


'/api/someUrl', 
XxsrfCookieName: 
xsrfHeaderName: 


'MY-CSRF-TOKEN' 
1X-MY-CSRF-TOKEN 


当然 ， 如 果 每 次 调 


都 这 么 写 ， 实 在 太 喝 叶 了， 不 符合 DRY (不 要 重复 


户 的 机 器 ， 只 要 在 论坛 放 个 签名 


自动 下 载 的 元 素 ， 比 如 <script src=http://www.hzcourse.com/resource/readBook? 


< 


h_ebook/uncompressed/15538/OEBPS/Text/... 等 。 


其 实 ， 业 界 早 就 给 出 了 防范 CSRF 攻 击 的 方案 ， 即 CSRF Token。CSRF Token 是 由 服务 器 在 每 个 会 话 开始 时 生成 的 一 个 随机 字符 串 ， 它 在 每 次 请 求 时 都 必须 带 上 ， 服 务 端 会 验证 它 ， 
不 同 ， 那 么 就 认为 是 无 效 的 请 求 。 由 于 CSRF Token 只 在 当前 会 话 中 有 效 ， 所 以 ， 攻 击 者 就 不 可 能 提前 预知 到 一 个 有 效 的 


片 或 发 个 邮件 给 你 ， 就 神 不 知 鬼 不 觉 地 完成 了 。 


ink rel="stylesheet"href=http://www.hzcourse.com/resource/readBook? 


自己 ) 原则 。 还 记得 大 明湖 畔 的 interceptors 吗 ? 它 就 是 答案 ， 我 把 它 留 给 你 们 


取 到 ， 不 过 这 个 问题 已 经 


于 它 派生 出 来 的 $resource| 
后 端 框 架 应 该 负责 对 比 这 两 者 是 否 一 致 ， 如 果 不 同 ， 则 拒绝 。 


属于 XSS 的 范畴 了 。 所 以 ， 


肛 务 中 ， 在 每 次 发 起 Ajax 请 求 前 ， 都 


使 不 触发 自动 下 载 ， 也 可 以 通过 诱骗 点 击 的 方式 实现 CSRF 攻 击 ， 比 如 <a href="http://bank.example.com/withdraw?account=Alice&amount=1000000&for=Mallory">Alice， 你 中 奖 啦 ! 点 


如 果 和 会 话 中 的 值 
token (除非 你 用 的 随机 数 算法 太 烂 ) ， 也 就 无 法 伪造 一 个 有 效 的 攻击 链接 了 ， 而 你 
时 刻 记 住 ， 安 全 是 一 个 系统 工 


动 读 取 一 个 名 叫 


汐 请 求 头 不 是 X-XSRF-TOKEN 呢 ? 没关系 ，Angular 提 供 了 配置 项 ， 让 你 可 以 随意 定制 这 两 个 名 字 。 


自己 做 练习 。 


他 的 错误 。 但 是 ， 别 高 兴 太 早 : 你 和 专家 之 间 ， 还 有 一 段 很 大 的 距离 ， 那 就 是 经 验 。 


下 列 形 式 调 


读 完了 前 面 的 章节 ， 你 差不多 可 以 和 Angular 专 家 侃侃 而 谈 了 ， 不 会 被 说 得 一 头 老 水， 甚至 可 以 指出 

“经 验 ” 是 个 很 抽象 的 东西 。 因 为 抽象 ， 所 以 很 难 传授 。 在 工程 实践 中 ,我们 会 通过 结对 编程 (Pair) 、 代 码 评审 (Code Review) 等 方式 来 尽 可 能 高 效 地 传授 经 验 。 但 没有 人 敢 说 把 所 有 经 验 都 传授 
了 ， 本 书 也 是 如 此 。 

从 现在 开始 ， 我 们 会 传授 一 些 能 够 帮助 你 成 为 专家 的 “经 验 ”。 但 是 ， 不 要 只 看 内 容 ， 要 仔细 体悟 这 些 经 验 背后 的 思想 。 

我 们 把 “经 验 ” 分 成 “最 佳 实践 ”、 “技巧 ” 和 “ 坑 ” 几 个 部 分 。 本 章 介绍 “最 佳 实践 ”， 讲 的 是 架构 级 质量 的 “大 道 ”， 值 得 项 目 组 的 每 个 人 去 了 解 其 来 龙 去 脉 。 


4.1 


在 《人 月 神话 》 中 ， 


在 组 织 良好 的 项 目 中 


调整 开发 协作 流程 


Brooks 总 结 道 : “在 一 个 已 经 超期 的 项 
， 会 尽量 避免 串 行 化 开发 ， 这 就 要 求 尽量 | 


中 增加 更 多 的 人 手 只 会 让 超期 更 加 严重 


明确 分 工 ， 优 化 沟通 路 径 ， 


。 这 人 句 话 揭示 了 项 


发 中 ， 则 更 侧重 提高 沟通 效率 。 但 是 ， 这 两 种 开发 模式 并 不 是 非 此 即 彼 的 ， 我 们 也 可 以 在 敏捷 开发 中 明确 分 工 、 优 化 沟通 路 径 。 


现实 中 ， 要 做 到 明确 分 工 并 不 容易 ， 特 别 是 在 没有 相应 技术 支 
后 端 技术 实现 一 个 REST 接 


一 种 
时 ， 


一 个 Cl (持续 集成 


这 种 变化 的 结果 就 是 


) 服务 器 和 端 到 端 测试 来 协调 两 者 ， 防 止 | 


出 现 了 专门 的 前 端 工程 师 ， 而 且 越 来 越 热 


组 织 中 的 一 个 客观 规律 : 沟通 成 本 会 严重 拖 慢 项 


是 高 沟通 效率 ， 从 而 实现 “并 行 化 ”。 在 传统 的 瀑布 式 流程 中 ， 更 侧 生 


进度 。 


口 ， 实 现 业 务 逻 辑 ; 用 Angular 写 一 个 前 端 程序 ， 实 现 交 互 逻 辑 。 在 这 种 方式 下 ， 我 们 只 要 事先 约定 一 个 REST 接 
因为 太 晚 集成 而 导致 难以 追踪 的 bug。 


门 。 但 是 ， 是 否 只 要 招聘 了 一 个 前 端 工程 师 就 可 以 高 枕 无 忧 呢 ? 不 是 的 ， 还 要 对 开发 流程 进行 相应 的 调整 。 理 想 的 开发 流程 如 


明确 分 工 、 优 化 沟通 路 径 ， 而 在 敏捷 开 


撑 的 情况 下 。 现 在 ， 这 种 分 工 变 得 容易 多 了 ， 这 得 益 于 前 后 端 分 离 架 构 的 盛行 。 典 型 的 Angular 应 用 就 是 基于 前 后 端 分 离 架构 的 : 用 任何 


， 就 可 以 让 前 端 程序 员 和 后 端 程序 员 同步 进行 开发 了 。 同 


[ 


4-1。 


act Activity Diagram0 | 


设计 Model 


写 控 和 


| 带 


出 线 框图 


写 模拟 服务 器 
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(套用 css 框架 】 ( 写 单元 测试 】 【访问 模拟 服务 器 ] 


微调 CSS 


写 AP 


VY 


制作 真实 数据 


图 4-1 


理想 的 开发 流程 


作为 整个 开发 流程 的 第 一 步 ， 


户 体验 设计 师 (UX) 会 给 出 一 组 线 框图 ， 


接 下 来 ， 有 两 个 职责 可 以 同步 开始 了 : 前 后 端 程序 员 会 开始 设计 数据 模型 ， 要 注意 ， 这 个 数据 模型 并 不 是 持久 化 时 使 
为 这 张 图 直接 对 应 着 REST API 的 设计 ; 而 测试 工程 师 可 以 同步 开始 设计 测试 


字段 级 ， 只 要 体现 出 类 名 和 类 关联 明 


器 


作为 前 端 程序 员 ， 现 在 手 里 有 了 线 框图 和 数据 模型 ， 就 可 以 开始 写 视图 


开始 写 了 ， 但 是 第 一 步 只 要 通过 往 $scope 上 赋值 ， 来 制造 出 一 些 假 数据 供 视图 显示 即 可 。 


来 表示 理想 中 的 


了 。 对 于 静态 的 内 容 ， 直 接 


户 体验 。 


实现 直 实 Server 


这 项 职责 在 某 些 组 织 中 也 可 能 由 产品 经 理 兼 任 。 


的 模型 ， 而 是 更 接近 于 DTO (数据 传输 对 象 ) ， 而 且 ， 这 个 数据 模型 不 


例 了 。 


HTML 表 示 出 来 对 于 动态 的 内 容 ， 则 使 


设计 测试 用 例 


写 端 到 端 测试 


细 化 到 


Angular 的 表达 式 或 指令 进行 表示 。 同 时 ， 控 制 器 也 可 以 


现在 的 伪 数 据 是 我 们 直接 写 死 在 前 端 程序 中 的 ， 而 现实 中 ， 真 实 的 数据 通常 是 来 自 后 端的 。 这 时 ， 我 们 可 以 定义 出 一 些 SAO (服务 访问 对 象 ) 通过 网 络 请 求 来 初始 化 数据 。 


但 是 ， 这 时 候 又 有 另 一 个 问题 : 后 端 程序 员 可 能 还 没有 开始 实现 后 端 AP 


， 甚 至 可 能 要 很 久 后 才能 提供 ， 作 为 前 端 程序 员 ， 是 否 要 等 他 ”当然 不 上 


端 API 提 供 一 个 伪 实 现 。 这 个 可 能 由 后 端 程序 员 来 写 ， 但 是 更 多 情况 下 是 由 前 端 程序 员 直 接 使 


这 节省 了 沟通 成 本 ， 提 高 了 开发 效率 。 


现在 ， 我 们 有 三 条 线 : 视图 、 控 制 器 、 伪 服务 器 。 三 条 线 可 以 同步 进行 。 


视图 线 可 以 开始 套 


(CSS 框架， 在 实际 工作 中 我 常 


Nodejs 实 现 的 。Nodejs 由 于 同样 使 用 JavaScript 作 为 开发 语言 ， 


的 是 Bootstrap， 这 个 步骤 完成 后 ， 我 们 的 程序 已 经 很 像 线 框图 了 : 


一 个 目标 是 让 它 可 以 操作 ， 走 通 整 个 业务 流程 ， 这 一 步 完 成 之 后 ， 我 们 的 项 目 风险 就 小 了 很 多 。 


布局 、 内 容 都 差不多 了 ， 但 是 多 


而 控制 器 接 下 来 就 要 开始 写 单元 测试 了 ， 


因为 我 们 需要 实现 交互 逻辑 ， 这 部 分 变 得 复杂 了 ， 就 需 
序 员 进 度 的 推进 ， 可 以 把 部 分 接口 替换 到 真正 的 服务 器 上 去 。 为 了 保证 伪 服 务 器 和 真正 的 服务 器 的 相似 性 ， 可 以 通过 写 一 些 专门 的 API 测 斌 来 保证 两 者 的 一 致 性 。 


通过 单元 测试 来 保障 代码 质量 了 。 同 时 ， 要 开始 连接 


， 我 们 可 以 先 写 一 个 Fake Server ( 伪 服 务 器 ) 来 为 后 
此 对 于 前 端 程序 员 来 说 ， 掌 握 它 并 不 难 ， 


观 (视觉 效果 ) 还 远 远 不 够 精细 ， 因 为 我 们 的 第 


后 端 了 ， 可 以 先 连 接 伪 服 务 器 接口 ， 随 着 后 端 程 


接 下 来 ， 前 端 程序 员 或 者 切 图 师 可 以 和 UX 结对 ， 开 始 进行 样式 的 微调 ， 使 其 达到 理想 的 视觉 效果 。 到 了 这 个 阶段 的 中 后 期 ， 通 常 是 随时 可 以 发 布 的 ， 只 是 精细 度 不 同 。 同 时 在 业务 分 析 师 或 客户 方 业务 
专家 的 帮助 下 ， 后 端 程序 员 会 构建 出 真实 的 数据 ， 测 试 也 会 贡献 一 部 分 真实 数据 。 


当前 后 端 连接 完毕 的 时 候 , 测 试 人 员 就 可 以 开始 写 端 到 端 测 试 了 ， 这 种 测试 将 模拟 最 终 


这 样 ， 一 个 用 户 故 


就 完成 了 ， 接 下 来 就 可 以 开始 写 下 一 个 


户 故 对 


企 前 后 端 分 离 架构 下 ， 不 但 开发 过 程 受到 影响 ， 


一 个 组 织 在 转型 过 程 中 ， 
后 庙 工 程 师 。 对 于 切 图 师 ， 


注意 培养 其 MVC 思 维 ; 对 于 后 端 工程 师 ， 要 注意 扩 


最 应 该 注意 的 就 是 对 人 员 的 培养 。 目 前 的 环境 下 ， 前 端 工程 师 处 于 严重 短缺 的 状态 ， 


以 结对 工作 ， 以 便 互相 学 习 ， 快 速 进步 。 


展 其 知识 


HH 


户 的 操作 ， 并 验证 操作 的 结果 。 


。 如 此 循环 ， 就 逐步 完成 了 一 个 完整 的 系统 。 


。 在 过 渡 期 ， 可 以 先 让 后 端 工程 


总 之 ， 开 发 过 程 和 组 织 结构 是 紧密 相关 的 ， 要 注意 同步 调整 ， 才 能 互相 促进 ， 逐 步 走向 完善 。 


最 快捷 的 方式 就 是 自己 培养 。 正 如 前 言 中 所 说 ， 前 端 工程 师 的 来 源 主 要 有 两 种 : 切 图 


这 样 才能 设计 出 完美 的 架构 。 


币 负 责 写 交互 逻辑 ， 而 切 图 师 重 点 学 习 和 应 


于 支撑 开发 过 程 的 组 织 结构 也 需要 发 生 相 应 的 变化 。 这 种 变化 最 显著 的 体现 就 是 专业 前 端 工程 师 的 出 现 ， 前 端 工程 师 的 高 级 阶段 则 是 前 端 架 构 师 。 而 
整个 系统 的 架构 师 则 应 该 是 全 栈 的 ， 他 应 该 能 以 横 跨 前 后 端的 视角 来 考虑 问题 ， 以 便 取 长 补 短 ， 充 分 发 挥 各 自 的 优点 ， 抑 制 其 缺点 


师 、 
CSs 技 术 来 精细 调整 外 观 。 两 者 可 


4.2 前 后 端 分 离 部 署 


在 工程 实践 中 ， 这 种 前 后 端 分 离 的 架构 是 一 种 常见 的 部 署 方 式 ， 即 使 用 Nginx、Apache 或 |1S 等 专业 Web 服 务 器 ， 使 用 静态 方式 来 部 署 前 端 。 然 后 通过 反 向 代理 把 对 后 端的 访问 转发 给 应 用 服务 器 。 在 
浏览 器 等 客户 端 软件 看 来 ， 它 们 就 像 在 同一 个 服务 器 一 样 。 


除了 提供 负载 均衡 等 功能 之 外 ， 更 重要 的 是 ， 反 向 代理 提供 了 一 层 抽象 ， 对 外 界 隐藏 了 部 署 的 细节 ， 这 让 我 们 的 开发 和 部 署 过 程 更 加 灵活 。 


当然 ， 对 程序 员 来 阅 ， 在 开发 阶段 也 会 有 “ 跨 域 ” 问 题 。 不 过 ， 我 们 同样 可 以 通过 反 向 代理 的 方式 让 它们 运行 在 同一 个 域 下 ， 这 样 也 就 不 存在 跨 域 问题 了 。 除 此 之 外 ， 还 可 以 让 业务 服务 器 通过 遵循 
CORS 标 准 来 声明 哪些 域名 下 的 脚本 可 以 访问 自己 提供 的 服务 ， 不 过 这 样 做 的 缺点 是 不 兼容 低 版 本 | 上 E。 


Nginx 的 基础 部 署 配置 如 下 : 


http { 
htth; //waw.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/..http://www.hzcourse.com/resource/readBook?path=/openresources/teach ek 
server { 
listen 80; 
server name your.domain.name; 
location / { 
root /var/www/yourDocRoot/; 
index index.html index.htm; 


location /api/ { 
proxy_set header Host $http host; 
proxy_pass http://another.domain.name:8080/api/; 


ocation/ 语 句 所 声明 的 是 一 个 静态 文件 服务 器 ， 把 一 个 静态 目录 中 的 文件 对 外 发 布 。root 可 指定 任意 路 径 ， 不 过 Unix 类 系统 中 通常 放 在 /var 目 录 下 。 另 外 ， 要 注意 把 读 取 权限 分 配给 Nginx 的 启动 账 
户 ， 否 则 访问 http://your.domain.name 时 可 能 出 现 403 (无 访问 权限 ) 错误 。 


ocation/api/ 语 句 所 声明 的 是 一 个 反 向 代理 ， 把 客户 端 对 http://your.domain.name/api/ 及 其 子路 径 的 访问 转发 到 http://another.domain.name:8080/api/， 也 就 是 前 面 提 到 的 业务 服务 器 。 
proxy_set_header Host$http_host 语 句 则 用 来 透 传 Host 头 : 如 果 不 透 传 的 话 ， 业 务 服务 器 中 取 Host 时 得 到 的 将 是 another.domain.name: 8080， 它 可 能 会 使 用 这 个 Host 来 合成 跳 转 地 址 等 信息 ， 但 这 些 
业务 服务 器 通常 是 对 外 不 可 见 的 ， 这 就 会 导致 异常 ;而 透 传 时 ， 业 务 服务 器 中 取 Host 时 将 得 到 的 your.domain.name: 80， 这 是 对 的 。 


注意 ，proxy_pass 后 面 的 地 址 是 指 从 Nginx 这 台 机 器 上 访问 的 地 址 ， 所 以 它 可 以 是 任意 外 网 地 址 或 内 网 地 址 。 某 些 部 署 环境 下 为 了 安全 起 见 可 能 会 禁用 外 部 DNS， 这 时 候 就 要 自己 添加 Host 表 或 直接 
IP 形 式 来 写 这 个 proxy_pass 地 址 了 。 


更 复杂 一 些 的 情况 出 现在 cookie 机 制 上 ， 部 分 服务 器 ， 特 别 是 Java 服 务 器 ， 会 使 用 cookie path 机 制 ， 即 让 http://localhost/api0http://localhost/api2 的 cookie 不 能 互相 访问 ， 如 果 我 们 把 /api/ 的 请 
求 转发 到 /api2/ 下 ， 那 么 由 于 它们 的 cookie path 不 互通 ， 就 会 出 现 问题 。Nginx 提 供 了 proxy_cookie_path 指 令 来 解决 这 个 问题 ， 例 如 : 


location /api2/ { 
proxy_set header Host $http host; 
proxy cookie path /api/ /api2/; 
proxy_pass http://another.domain.name:8080/api/; 


前 后 端 分 离 的 部 署 方式 ， 还 允许 我 们 对 静态 文件 通过 CDN (内 容 分 发 网 络 ) 进行 优化 ， 可 以 充分 借助 CDN 供 应 商 的 基础 设施 ， 确 保 在 各 地 网 络 中 都 可 以 非常 快 地 访问 它 。 而 动态 内 容 就 很 难 通过 CDN 
优化 了 。 


4.3 样式 中 心 页 


在 2014 年 7 月 的 ThoughtWorks 技 术 雷达 中 ， 提 到 一 项 叫 作 “ 现 行 样式 指南 ”的 技术 。 即 把 当前 系统 中 主要 的 样式 都 应 用 到 一 个 样式 中 心 页 中 ， 让 所 有 人 都 能 看 到 它 。 这 样 做 有 两 个 好 处 : 一 是 促进 前 
端 开发 人 员 和 设计 师 的 紧密 协作 ， 这 种 对 流程 的 改进 ， 在 实际 开发 中 可 以 带 来 巨大 的 价值 ; 二 是 维护 样式 的 统一 性 ， 避 免 出 现 同一 个 样式 被 多 个 人 定义 的 情况 。 


在 传统 的 开发 过 程 中 ， 通 常 都 是 设计 师 出 PSD 图 ， 然 后 切 图 成 HTML 和 (人 CSS， 最 后 交 给 程序 员 ， 让 程序 员 在 这 些 成 果 的 基础 上 写 代码 ， 最 后 比 对 运行 效果 和 PSD 的 差异 进行 微调 。 这 就 导致 了 开发 和 设计 
之 间 的 工作 流 被 割裂 一 一 这 有 点 类 似 瀑布 式 开 发 的 情况 。 事 实 上 ， 也 正 是 如 此 ， 这 种 合作 方式 对 开发 效率 的 影响 很 大 。 


基于 样式 中 心 页 的 方法 使 得 工作 流 可 以 被 改进 。 在 2015 年 4 月 的 ThoughtWorks 技 术 雷达 中 ， 出 现 了 一 个 “NoPSD” 运 动 。 它 所 提倡 的 是 这 样 的 工作 流 : 


1) 设计 师 出 线 框图 ， 体 现 出 大 致 的 布局 和 内 容 摆 放 。 


2) 前 端 开 发 人 员 使 用 HTML/CSS 套 用 一 个 现成 的 CSS 框 架 (如 Bootstrap) 快速 制作 一 个 样式 中 心 页 。 


3) 设计 师 和 前 端 开 发 人 员 结 对 坐 在 一 起 对 样式 中 心 页 进行 调整 。 


4) 前 端 开 发 人 员 制 作 其 他 页 面 。 


5) 如 果 设计 师 需 要 做 细节 调整 ， 那 么 就 跟前 端 开 发 人 员 结对 修改 。 


这 种 工作 流 中 ， 不 再 使 用 作为 最 终 验 收 标准 的 PSD 文 件 ， 而 是 共同 对 最 终结 果 负 责 。 


前 端 开发 人 员 也 不 是 被 动 地 接受 设计 师 的 成 果 ， 而 是 在 与 设计 师 协 作 的 同时 ， 也 要 兼顾 CSS 的 统一 性 ， 而 CSS 的 统一 性 ， 也 意味 着 最 终 网 站 的 统一 性 。 当 有 些 设计 影响 到 网 站 的 统一 性 时 ， 设 计 师 也 可 能 
需要 对 设计 进行 调整 ， 而 没有 开发 人 员 的 参与 ， 往 往 难 以 发 现 细节 上 的 不 统一 。 


4.4 CSS 的 扩展 语言 与 架构 


对 于 复杂 的 网 站 ， 直 接 写 CSS 已 经 显得 不 够 用 了 。 


最 明显 的 缺点 是 不 能 定义 变量 ， 这 样 ， 你 的 代码 中 就 会 充斥 着 各 种 “ 魔 数 ” ， 如 各 种 颜色 、 各 种 


header .css-class { 
} 

header a[href] { 

} 


最 后 就 是 难以 复 用 ， 我 们 定义 好 的 风格 不 能 被 复 


总 之 ， 我 们 被 迫 不 断 地 “ 


自己 ”, 很 不 “DRY” 


(不 要 重复 自己 ) 。 


问题 的 根源 在 于 ， 它 要 解决 的 
为 了 解决 这 些 问题 ， 诞 生 了 Scss、Less、Stylus 等 扩 | 


仅仅 增加 语法 支持 仍然 是 不 够 的 。 正 如 我 们 虽然 有 了 不 少 新 的 编程 语言 ， 却 仍然 可 能 写 出 烂 代码 一 样 ， 这 些 CSS 扩 | 


正如 CSs 的 名 称 “ 层 玫 样 式 表 ” 所 暗示 的 ，CSSs 是 由 多 层 样 式 互相 二 加 出 来 的 。 最 底层 的 样式 规定 全 局 44 


问题 已 经 达到 了 编程 语 


层 的 样式 则 规定 只 有 当前 页 甚 


层 样式 ， 我 们 可 以 做 精致 的 纪 


有 了 架构 的 视角 ，CSS 就 不 再 是 一 团 糟 或 者 各 自 为 政 的 一 系列 样式 ， 而 成 为 了 一 个 可 维护 的 “程序 ”。 


王 习 且 


区 域 有 效 的 样式 。 


言 的 复杂 度 


展 语 言 ， 它 1 


其 次 就 是 繁琐 的 庶 套 选择 器 ， 比 如 我 们 在 header 下 有 多 种 CSS 类 ， 我 们 就 要 把 它们 都 写成 header.css-class 的 形式 ， 如 : 


， 比 如 加 阴影 的 多 浏览 器 兼容 代码 ， 于 是 不 得 不 在 不 同 的 地 方 重 


， 却 没有 编程 语言 的 组 合 、 继 承 、 混 入 (Mixin) 等 特性 的 支撑 。 


门 引入 了 很 多 高 级 语法 特性 ， 并 且 在 最 终 发 布 时 编译 成 CSS 文 件 ， 以 确保 浏览 器 不 需要 升级 就 能 支持 它 。 


备 CSS| 


也 不 足以 保障 我 们 写 出 优秀 的 CSS 代 码 。 我 们 还 需 


按照 CSS 的 规则 ， 越 是 表层 的 样式 ， 其 优先 级 就 越 高 ， 
节 处 理 。 


明白 了 架构 视角 的 重要 性 ， 还 


学 习 一 些 


肤 资源 ， 最 重要 的 是 ， 它 充分 体现 了 CSS 的 架构 思想 。 


4.5 ”HTML 的 表意 性 


aT 


于 是 会 覆盖 底层 的 设 


体 的 实现 才能 真正 理解 这 种 思想 。 好 在 我 们 有 了 一 个 现成 的 CSS 架 构 典范 : Bootstrap。Bootstrap 不 仅 是 一 个 工业 级 的 漂亮 框架 ， 而 且 . 


尺寸 值 等 。 要 想 改 配色 风格 之 类 的 情况 下 ， 就 要 修改 很 多 处 ， 忘 记 了 任何 一 处 都 可 能 导致 风格 不 一 致 。 


的 架构 级 视角 。 


效 的 样式 ， 如 全 局 的 默认 字体 、 背 景色 等 。 中 层 的 样式 可 以 定义 一 些 


上 有 通 


价值 的 组 件 。 最 表 


。 这 样 ， 我 们 就 有 了 一 个 兼顾 统一 性 和 特异 性 的 CSS 架 构 。 通 过 修改 底层 样式 ， 我 们 可 以 改变 网 站 的 整体 风格 ， 通 过 修改 表 


有 丰富 的 第 三 方 皮 


从 HTML4 到 HTML5， 在 元 素 上 发 生 了 很 多 变化 ， 比 如 : 原本 随处 可 见 的 div， 被 拆 分 成 了 很 多 种 不 同 的 元 素 ， 如 header、footer、section 等 。 它 们 在 外 观 上 和 div 完 全 相同 ， 这 些 新 元 素 的 价值 是 什么 
呢 ? 再 如 ， 原 来 的 big、font、center 等 元 素 被 废弃 ， 这 是 为 什么 呢 ? 


想 弄 明白 这 些 问题 ， 首 先 要 明白 


了 big、font 等 历史 标签 ， 以 及 onclick 等 历史 属性 。 


随 着 技术 的 进步 ， 描 述 外 观 和 处 理 交 互 的 


(Document) ， 它 用 来 描述 


剥离 了 其 他 职责 之 后 ，HTML5 
特定 语义 的 标签 进行 特别 处 理 ， 如 不 


除了 标签 的 变化 之 外 ， 可 读 性 


展示 的 信息 。 我 们 可 以 


变 得 更 加 轻 量 级 ， 使 
同 的 语调 、 稍 长 停顿 等 。 如 果 者 


HTML 和 CSS 的 分 工 。 一 个 | 


Word 文 档 做 类 比 ， 它 有 页 


上 也 更 加 


来 ， 而 一 个 表意 性 良好 的 HTML5 页 


<ol class="breadcrumb"> 


H 


<11><a href="#"> 首 页 </a></1i> 
<l1i><a href="#"> 国 内 新 闻 </a></1i> 


<1i> 聚 焦 xxx 事 件 </1i> 


</ol> 


这 是 一 个 有 序列 表 ， 准 确 地 描述 了 导航 关系 。 虽 然 外 观 不 符 


且慢 ! 和 斜 线 去 哪儿 了 ? 我 们 首先 要 明白 ， 用 作 分 隔 符 的 斜 线 ， 并 不 是 文档 所 要 


提供 了 一 个 伪 元 素 : before。 比 如 在 Bootstrap 中 ， 对 路 径 导航 是 这 样 定义 的 : 


.breadqcrumb>1i+1i:before 


padding: 0 Spx; 
color: #ccc; 
content: "/\00a0"; 


只 要 抓 住 了 表意 性 这 个 核心 ， 我 们 就 可 以 得 到 一 篇 


4.6 table， 天 使 还 是 魔鬼 


布局 (Layout) 对 于 页 面 


来 说 是 非常 


化 ，table 布 局 的 缺点 变 得 越 来 越 明 显 。 


最 明显 的 问题 是 页 面 加 载 慢 。 由 于 在 各 行 中 ， 列 的 宽度 必须 保持 一 致 ， 


内 容 的 加 载 而 不 断 变 化 ;如 果 等 全 部 


不 过 ， 最 明显 的 问题 未 必 是 最 严重 的 问题 。 最 严重 的 问题 是 什么 呢 ? 乱七八糟 的 HTML 标 签 ! 
义 ， 而 表 体 用 来 体现 数据 的 内 容 ， 并 根据 数据 的 不 同 


载 完 再 显示 ， 那 么 页 


面 就 得 在 相当 长 一 段 


时 间 内 白 


冒 、 页 脚 、 节 等 ， 了 


由 。 比 如 ， 为 了 让 有 视力 障碍 的 小 伙伴 儿 们 也 可 以 接 和 
[是 div， 就 很 难 判断 了 。 


要 求 HTML 更 加 干净 ， 如 网 站 上 常见 的 路 径 导 航 (Breadcrumb) : 首页 / 辐 
， 会 把 它 描述 成 这 样 : 


jf 合 我 们 的 要 求 ， 但 是 我 们 可 以 把 它 通过 CSS 重 定义 为 横向 排列 。 


F 兆 漂亮 、 便 于 维护 的 HTML 文 档 。 


要 的 ， 它 决定 了 空间 的 分 配方 式 。 在 Web 的 早期 阶段 ，HTML、CSs 的 标准 还 很 不 完善 ， 于 是 ，table 成 为 了 最 流行 的 布 


网 络 世 界 ， 有 一 类 产品 叫 


件 ， 在 传统 的 方式 中 ， 我 们 会 直 


户 界面 ， 主 要 包括 三 项 职责 : 提供 信息 、 描 述 外 观 、 处 理 交互 。 在 Web 刚 刚 诞生 的 时 代 ， 这 三 者 是 合 一 的 ， 都 由 HTML 负 责 ， 于 是 就 出 现 


职责 逐步 从 HTML 中 分 离 出 来 ， 前 者 成 为 了 CSS， 后 者 成 为 了 Javascript。 而 HTML 所 剩 下 的 职责 ， 就 是 提供 信息 了 。 于 是 ，HTML 成 为 了 一 篇 纯粹 的 文档 
是 我 们 有 了 对 应 的 header、footer、section 等 HTML5 元 素 。 


屏幕 阅读 器 (Screen Reader) ， 它 们 可 以 对 这 些 具有 


一 系列 a 标 签 和 "/" 文 本 把 它 定义 出 


展示 的 信息 的 一 部 分 ， 它 不 出 现在 这 里 是 比 出 现 更 加 合理 。 但 是 我 们 在 外 观 上 确实 需要 需要 它 ， 怎 么 办 呢 》 没关系 ，CSS 


局 技术 。 不 过 ， 随 着 页 


的 复杂 


回 


table 布 局 ， 会 严重 扰乱 HTML 的 表意 性 。table 元 素 的 原本 含义 ， 是 一 个 表格 ， 表 头 


属性 分 成 多 个 列 。 显 然 ， 布 


局 表格 不 具有 这 样 的 含义 ， 这 将 降低 HTML 的 可 读 性 ， 并 最 


因此 只 有 遍历 完 所 有 行 的 内 容 之 后 ， 才 能 最 终 确定 各 列 的 宽度 ， 这 就 导致 一 个 两 难 问题 : 如 果 边 加 载 边 显示 ， 就 会 让 列 宽 随 着 新 
茫茫 一 片 。 对 设计 师 来 说， 这 简直 是 魔鬼 的 把 戏 。 


来 体现 数据 的 含 


还 有 一 个 不 是 很 显著 的 问题 ， 就 是 布局 的 灵活 性 。 对 于 使 用 table 方 式 进行 布局 的 页 面 ， 


相同 的 页 面 ， 其 HTML 结 构 相 差 很 大 。 


随 着 CSs 标 准 化 的 推进 ，table 布 局 技术 逐步 被 业界 放弃 ，DIV+ (CSS 布局 技术 成 为 新 


工序 


想 要 调整 布局 ， 很 多 情况 下 都 不 得 不 去 修改 HTML， 而 不 能 通过 CSS 来 调整 。 这 就 导致 一 个 问题 : 两 个 内 容 完 


主流 。 它 基本 克服 了 上 述 问题 ， 这 是 一 个 可 喜 的 进步 。 


那么 ，table 是 否 应 该 退出 历史 舞台 了 ?并非 如 此 。table 是 否 有 用 ， 取 决 于 它 用 在 哪里 。 布 局 不 应 该 用 table 的 根本 原因 ， 是 它 不 具有 table 的 业务 含义 。 总 之 : 衡量 是 否 应 该 用 table 的 标准 ， 是 它 的 业 


务 含义 。 比 如 一 个 统计 表 ， 它 本 来 就 应 该 是 一 个 table， 那 么 就 应 该 放心 地 


此 外 ，table 还 具有 一 种 外 观 上 的 优点 : 自 适应 内 容 。 在 传统 的 table 中 ， 


比如 一 个 水 平 排列 的 表单 ， 包 括 字段 标签 和 输入 框 。 我 们 需要 让 各 行 的 字段 标签 向 右 对 齐 ， 输 


局 可 以 省 去 强制 指定 宽度 的 麻烦 ， 否 则 在 开发 时 需要 多 次 尝试 这 些 宽度 值 ; 


如 果 一 行 有 两 个 列 ， 
而 修改 时 也 是 如 此 。 


table。 这 时 候 如 果 非 要 用 DIV+CSs 来 模拟 ， 反 倒 让 页 面 的 HTML 变 得 混乱 。 


中 一 个 确定 出 宽度 之 后 ， 另 外 一 个 列 就 会 自动 占用 剩余 的 宽度 。 这 就 带 来 一 个 优点 : 自动 布局 。 自 动 布 


入 框 向 左 对 齐 。 但 是 我 们 怎么 确定 字段 标签 列 的 宽度 呢 ? 指定 短 了 ， 如 果 出 现 长 标签 就 会 导致 折 行 ; 指定 


长 了 ， 没 有 长 标签 的 表单 又 会 显得 太空 。 显 然 ， 最 好 的 方式 是 让 它 自动 根据 标签 的 内 容 确定 列 宽 ， 而 table 天 生 的 布局 逻辑 就 是 如 此 。 


那么 ， 我 们 是 否 为 了 换取 这 种 自 适应 内 容 的 布局 方式 而 重新 用 table 标 签 进行 布 


有 没有 一 种 两 全 之 策 ? 有 ! CSS 中 可 以 指定 显示 模式 ， 也 就 是 display 风 格 。 这 里 


比如 ， 在 Bootstrap 中 对 于 水 平 表 单 是 这 样 定义 的 : 


<form class="form-horizontal"> 
<div class="form-group"> 
<label for="field1"> 字 段 1</1abel> 


<input type="text" id="field1l" class="form-control" /> 


</div> 
<div class="form-group"> 
<label for="field2"> 字 段 2</label> 


<input type="text" id="field2" class="form-control" /> 


</div> 
</form> 


S 


如 果 我 们 需要 让 这 个 表单 的 标签 列 根据 内 容 自动 调整 宽度 ， 那 么 就 可 以 进行 如 下 定义 : 


<form class="form-horizontal auto-layout"> 


局 呢 ? 我 们 说 ， 对 于 HTML， 最 重要 的 是 内 容 的 表意 性 ， 改 用 table 标 签 进行 表单 布局 ， 得 不 偿 失 。 


到 的 是 display: table、display: table-row 和 display: table-cell 这 几 个 风格 。 


http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/... 


</form> 


并 配合 如 下 的 样式 定义 : 


.form-horizontal .auto-layout { 
display: table;  // 重 定义 为 table 风 格 ， 相 当 于 table 元 素 


// http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/... 


> .form-group { 


display: table-row; // 把 所 有 直接 下 级 重 定义 为 Ltable-row 风 格 ， 相 当 于 tr 元 素 
// http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/... 
和 迷 扑 


display: table-cell; // 把 所 有 直接 下 级 重 定义 为 table-cell， 相 当 于 td 元 素 
// http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/... 


} 


不 过 ,改变 显示 方式 后 ， 和 传统 显示 方式 的 表现 出 现 了 一 些 细微 的 


最 明显 的 是 它 不 再 支持 margin 风 格 ， 这 可 以 使 用 padding 风 格 来 代替 。 还 有 一 个 比较 宣 


display: table-cell 下 ， 它 改变 的 是 其 子 元 素 的 垂直 对 齐 方式 。 


别 ， 这 是 需要 注意 的 。 


这 种 把 其 他 元 素 重 定义 为 表格 式 布局 的 方式 也 被 Bootstrap 用 于 input-group 类 的 定义 中 。 


4.7 测试 什么 ”怎么 测 ? 


在 以 前 ， 要 对 前 端 代码 进行 单元 测试 是 很 难 的 ， 更 不 要 说 TDD 了 。 


而 MV* 的 时 代 ， 由 于 交互 逻辑 和 DOM 操 作 已 经 充分 解 耦 ， 而 且 控制 器 的 代码 也 都 


要 的 变化 是 vertical-align 风 格 变化 了 ， 如 display: inline-block 下 ， 它 改变 的 是 元 素 自 身 的 垂直 对 齐 方式 ， 而 在 


因为 在 交互 逻辑 中 混合 了 很 多 DOM 操 作 ， 不 容易 解 厢 ， 运 行 也 比较 慢 。 


局 部 化 了 ， 


因此 使 用 TDD 的 条 件 已 经 成 熟 了 。 


在 Angular 中 ， 实 现 TDD 是 非常 容易 的 ， 除 了 Angular 在 设计 之 初 就 把 可 测试 性 放 在 第 一 优先 级 之 外 ， 还 要 归 因 于 前 端 工具 链 的 成 熟 ， 如 Karma、Jasmine 等 。 


在 Karma 中 ， 有 计算 测试 覆盖 率 的 功能 。 当 然 ， 我 并 不 主张 对 前 端 开发 进行 全 面 覆 


;这 让 


是 因为 前 端 需 求 的 变更 要 比 后 端 剧 烈 和 快速 得 多 。Martin Fowler 的 建议 是 达到 80% 覆 盖 率 即 可 : 低 了 不 


能 安全 地 重 构 ， 高 了 涉及 细节 过 多 ， 又 经 常 需要 同时 修改 测试 代码 和 程序 代码 。 


测试 覆盖 率 的 把 握 ， 可 以 根据 项 目 组 的 实际 情况 和 所 处 阶段 进行 调整 。 比 如 在 快速 原型 阶段 ， 首 要 目标 是 尽快 跟 业 务 部 门 验 证 需求 ， 很 多 功能 可 能 演示 完 都 要 剧变 甚至 砍 掉 ， 这 时 候 先 不 写 测试 都 可 
以 。 如 果 在 临 上 线 前 ， 那 么 任何 大 的 改动 ， 都 必须 在 单元 测试 的 覆盖 下 完成 ， 特 别 是 对 于 准备 改动 的 代码 ， 先 适量 补充 测试 ， 让 测试 覆盖 率 达到 80% 以 上 才 会 更 放心 。 这 正 是 : “与 其 担 惊 受 怕 ， 不 如 退 而 


测试 ”。 
实践 中 的 大 致 原则 如 下 : 
.对 Filter 和 Service 进 行 覆 盖 式 测试 。 


“ 装饰 器 型 指令 在 保持 功能 尽 可 能 简单 的 前 提 下 进行 覆盖 。 


“ 对 需求 已 经 稳定 的 控制 器 和 组 件 型 指令 进行 覆盖 ， 需 求 不 稳定 的 部 分 ， 则 先 覆 盖 主 体 远 辑 ， 忽 略 细 节 ， 随 着 项 目的 推进 逐步 覆盖 。 


“ 如 果 需 要 进行 重 构 ， 先 估算 一 下 涉及 的 部 分 和 覆盖 率 有 多 高 ， 尽 量 补充 到 80% 以 上 再 开工 重 构 。 


“ 如果 发 现 了 逻辑 类 的 Bug， 那 么 就 要 补充 相应 的 测试 ， 让 它 能 覆盖 此 Bug。 


接 下 来 ， 我 们 来 解决 怎么 测 的 问题 。 


4.8 如 何 设计 友好 的 REST APl 


4.8.1 URI 


在 REST 中 的 典型 URI 一 般 由 名 称 和 id 组 成 ， 比 如 : 


/users: 所 有 用 户 的 列表 
/users/1: id 为 1 的 用 户 ， 简 称 用 户 1 


如 果 没 有 受到 技术 限制 ， 那 么 id 最 好 使 用 uuid。 即 使 在 非 REST 的 架构 中 ，uuid 也 以 其 使 用 简单 、 无 锁 等 优势 而 备 受 推崇 。 而 在 REST 风 格 的 架构 中 ， 除 了 上 述 优点 以 外 ， 它 还 有 利于 在 分 布 式 系统 中 独 
立 处 理 ， 可 以 各 自 插入 数据 ， 而 不 用 担心 id 冲突 。 


这 是 单 层 资源 ， 除 此 之 外 ， 还 可 以 定义 多 层 资源 ， 比 如 : 


/users/1/files: 用 户 1 的 所 有 文件 
/users/1/files/2: 用 户 1 的 文件 中 id 为 2 的 文件 


上 面 定义 了 两 层 资源 ， 还 可 以 用 类 似 的 规则 定义 多 层 资源 ， 但 是 过 深 的 资源 也 不 是 好 事 ， 由 于 参数 过 多 ， 在 使 用 时 会 相当 不 方便 。 


理论 上 ,任何 多 层 资源 都 是 由 多 个 两 层 资源 组 合 而 成 的 ， 所 以 ， 本 质 上 说 ,资源 嵌 套 只 要 两 层 就 够 了 ， 特 别 是 在 使 用 uuid 的 情况 下 ， 可 以 更 安全 的 拆 分 成 两 级 谋 套 。 因 此 ， 除 非 在 表意 性 上 确 有 必要 ， 
否则 ， 使 用 两 层 资源 如 


口 


定义 URI 的 一 个 误区 ， 是 把 一 些 查询 参数 直接 定义 在 URI 中 ， 比 如 /users/age/20/60。 显 然 ， 这 是 一 个 非常 难看 的 URI， 如 果 改 写成 /users? minAge=20&&maxAge=60， 是 不 是 简明 多 了 ? 


4.9 使 用 controller as Vm 方式 


Angular 从 1.2 开 始 引 入 了 新 语法 Controller as。 在 此 之 前 的 版 本 需要 在 Controller 中 注入 $scope 这 个 服务 ， 才 能 在 视图 绑 定 中 使 用 这 些 变 量 。 之 前 版 本 代码 如 下 : 


angular.module ('com.ngnice.app') .controller ('DemoController', function($scope){ 
$scope.title = 'Angular'; 

}) 

<div ng-app="com.ngnice.app" ng-controller="DemoController"> 
hello : {{title}}! 

</div> 


在 Controller 中 我 们 需要 显 式 地 注入 $scope， 对 于 Controller 来 说 ，$scope 几 平 是 我 们 必须 使 用 的 对 象 ， 每 次 都 需要 加 入 这 个 参数 。 对 于 有 MVC 模 式 洁癖 的 人 来 说 ， 这 也 会 显得 不 那么 POJO (Plain 
Object Javascript Object， 是 指 普通 纯粹 的 JavaScript 对 象 ) 。 所 以 在 Angular 1.2 版 本 中 引入 了 新 的 语法 糖 controller as， 上 面 示例 代码 等 价 于 : 


angular.module ('com.ngnice.app') .controller ('DemoController', function(){ 
this.title = 'Angular'; 


<div ng-app="com.ngnice.app" ng-controller="DemoController as demo"> 
hello : {{demo.title}}! 
</div> 


在 这 里 Controller 中 并 没有 注入 $scope 服 务 ，Controller 看 起 来 更 接近 普通 的 JavaScript 对 象 。 其 他 的 改变 则 是 在 视图 中 将 ng-controller 的 值 变 为 “DemoController as demo”， 为 Controller 引 入 一 
个 别名 ,方便 在 ng-controller DOM 区 域内 的 视图 模板 通过 这 个 别名 来 访问 数据 对 象 ， 如 示例 中 的 demo.title。 


4.10” 移 除 不 必要 的 $watch 


双向 绑 定 是 Angular 的 核心 概念 之 一 ， 它 给 我 们 带 来 了 思维 方式 的 转变 : 不 再 是 DOM 驱 动 ， 而 是 以 Mode| 为 核心 ， 在 View 中 写 上 声明 式 标签 。 然 后 ，Angular 就 会 在 后 台 默 默 地 同步 View 的 变化 到 
Model， 并 将 Model 的 变化 更 新 到 View。 


双向 绑 定 带 来 了 很 大 的 好 处 ， 但 是 它 需要 在 后 台 保 持 一 只 “眼睛 ， 随 时 观察 所 有 绑 定 值 的 改变 ， 这 就 是 Angular 1.x 中 “性 能 杀手 ”的 “ 脏 检查 机 制 ” ($digest) 。 可 以 推论 : 如 果 有 太 多 “ 眼 
睛 ”， 就 会 产生 性 能 问题 。 在 讨论 优化 Angular 的 性 能 之 前 ， 笔 者 希望 先 讲解 Angular 的 双向 绑 定 和 watchers 函 数 。 


4.11 总 是 用 ng-model 作 为 输出 


我 们 写 指令 时 ， 有 三 种 方式 可 以 输出 操作 结果 : 写 回 调 函数 ， 当 有 需要 输出 的 内 容 时 调用 ， 并 传 入 结果 ; 传 入 哈 希 对 象 ， 然 后 对 它 的 属性 赋值 ; 依赖 ng9Model 指 令 ， 并 传 入 值 。 


以 分 页 控件 (pagination) 为 例 。 回 调 函 数 的 方式 最 直观 ， 就 不 举例 子 了 。 它 的 缺点 是 使 用 起 来 不 方便 ， 必 须 在 控制 器 中 写 一 个 回调 函数 来 接收 结果 ， 并 赋值 给 一 个 内 部 变量 。 


哈 希 对 象 的 方式 ， 我 们 可 以 这 样 写 : <pagination page= "page"> ， 在 指令 中 ,我们 可 以 对 page.index 进 行 赋值 。 于 是 使 用 者 传 入 的 page 对 象 的 index 属 性 被 修改 了 。 


这 种 方式 有 什么 问题 ? 首先 是 读者 不 能 直观 地 预料 到 这 个 指令 会 怎么 进行 输出 ，page 属 性 没有 任何 特别 之 处 ， 其 他 指令 也 多 半 不 会 使 用 。 其 次 ,假如 page 有 个 有 效 性 范围 ， 我 们 没有 一 种 好 方法 进行 
校 验 一 一 除非 我 们 给 page 新 增 一 个 属性 。 最 后 ， 如 果 使 用 者 想 在 它 变化 的 时 候 做 点 处 理 ， 那 么 不 得 不 再 绑 定 一 个 回调 函数 的 属性 。 


这 些 ,， 正 是 ngModel 指 令 所 要 解决 的 问题 。 首 先 ，ngModel 是 作为 输出 的 标准 方式 ， 任 何人 一 看 就 知道 “ 哦 ， 这 个 指令 要 输出 点 什么 ”。 其 次 ，ngModel 有 一 系列 的 错误 校 验 机 制 ， 可 以 允许 当前 指 
令 或 者 另 一 个 指令 对 ngModel 的 内 容 进行 校 验 一 一 事实 上 ， 用 单独 的 指令 来 验证 结果 是 我 更 加 推荐 的 方式 ， 这 样 可 以 让 指令 的 职责 更 加 单一 化 ， 也 就 是 内 聚 性 更 高 。 最 后 ，ngModel 有 标准 的 通知 事件 ， 


也 就 是 ng-change 指 令 。 当 我 们 展 次 在 input 指 令 中 看 到 ng-change 指 令 时 ， 也 许 会 惯性 的 以 为 这 是 input 的 通知 事件 ， 
ng-change 事 件 。 


怎么 写 呢 ? 伪 代 码 如 下 : 


directive('pagination', function() { 
return { 

restrict: ‘'E', 

require: 'ngModel', 

link: function(scope, elm, iAttrs, ngModelController) { 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15 
SomeEvent (function (index) { // 当 某 些 事件 触发 的 时 候 ， 改 变 ngModel 的 值 

ngModelController.$setViewValue (index); 


http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15 


但 事实 上 ， 它 是 ngModel 的 通知 事件 ， 换 句 话说 ， 有 ngModel 的 地 方 都 可 以 使 


538/OEBPS/Text/... 


538/0EBPS/Text/... 


4.12 ”用 打包 代替 动态 加 载 


有 一 个 很 著名 的 库 ， 叫 作 requirejs， 它 可 以 动态 加 载 Javascript 文 件 ， 这 个 看 似 很 酷 的 功能 ， 吸 引 了 很 多 程序 员 ， 以 为 动态 加 载 是 前 端 程序 必 备 的 。 


但 事实 上 ， 并 非 如 此 。 


在 现在 的 HTTP 协 议 中 ， 每 下 载 一 个 文件 ， 都 需要 建立 一 个 连接 ， 然 后 断 开 。 当 小 文件 很 多 时 ， 这 些 操作 的 时 间 代价 甚至 可 能 超过 网 络 传输 的 代价 ， 这 个 看 似 提速 的 功能 ， 却 最 终 拖 慢 了 速度 。 


于 是 ， 另 一 种 发 布 方式 变 成 了 主流 : 把 所 有 JavaScript 文 件 连接 成 一 个 文件 ， 然 后 进行 最 小 化 、 混 淆 等 。 并 且 ， 最 终 部 署 时 开启 gzip， 这 通常 可 以 把 JavaScript 的 下 载 大 小 再 进一步 压缩 到 原 大 小 的 1/3 


左右 。 


require.js 真 正 的 价值 在 于 模块 化 ， 而 不 是 动态 加 载 ， 它 弥补 了 JavaScript 语 言 的 先天 不 足 。 


不 过 ，Angular 自 己 内 置 了 一 个 模块 化 系统 ， 而 且 这 个 模块 化 系统 还 支持 依赖 注入 等 很 酷 的 功能 。 所 以 ， 对 于 Angu 
有 害 无 益 。 


ar 程序 来 说 ，requirejs 不 再 是 必须 的 ， 甚 至 可 能 由 于 技术 栈 的 复杂 化 而 出 现 冲突 ， 


有 时 候 ， 一 些 第 三 方 库 很 大 ， 确 实 需要 动态 加 载 。 要 解决 这 个 问题 ， 可 以 进行 局 部 化 的 动态 加 载 。 比 如 对 于 Highchart 等 插件 ， 可 以 定义 一 个 Highchart 指 令 ， 当 它 首次 被 使 用 时 才 动态 加 载 


highchartjs， 加 载 完毕 后 再 调用 其 中 的 函数 。 这 样 ， 既 让 整体 的 代码 尽 可 能 简化 ， 又 可 以 加 快 启动 速度 。 


4.13 引入 Angular-hint 


Angular-hint 是 在 Angular1.3 版 本 之 后 出 现 的 ， 它 的 目的 在 于 帮助 我 们 写 出 更 好 的 Angular 代 码 ， 以 及 更 容易 的 定位 Angular 中 常见 的 错误 问题 。 


也 许 你 曾经 也 发 生 过 这 样 的 事情 : 你 想 从 第 三 方 的 Angular 库 或 者 是 其 他 人 开发 的 模块 中 ， 使 用 一 些 通用 的 指令 ， 你 


序 怎么 也 运行 不 起 来 。 于 是 你 就 开始 了 漫长 的 排查 ， 可 能 是 十 多 分 钟 ， 也 可 能 是 几 个 小 时 的 定位 、 排 查 。 最 后 却 发 现 是 


尔 很 仔细 地 阅读 指令 的 文档 ， 并 按照 它 的 方式 一 步 一 步 完 成 了 你 的 模块 ， 可 是 你 的 程 
自己 忘 了 加 模块 的 依赖 ， 这 时 你 肯定 也 会 像 当初 的 我 一 样 哭 笑 不 得 。 


这 只 是 Angular-hint 的 好 处 之 一 ， 它 还 在 社区 的 支持 下 快速 地 发 展 着 ， 迄 今 它 已 经 有 了 7 位 贡献 者 、151 个 提交 和 5 个 小 版 本 。 


它 目前 已 经 拥有 的 modules 如 下 : 
“angular-hint-controllers: 包含 全 局 conttoller 的 警告 、 以 及 conttoller 命 名 等 最 佳 实践 。 
:angular-hint-directives: 包含 指令 的 atttibute、tag 命 名 方式 ， 以 及 更 多 的 Angulat 指 令 最 佳 实践 。 
:angular-hintrdom: 它 会 对 于 在 Angular conttoller 中 使 用 DOM 处 理 ， 发 出 强烈 的 警告 。 
angular-hint-events: 标记 出 事件 表达 式 中 值 为 undefined 的 变量 。 


“ angular-hint-interpolation: 关于 {{}} 表 达 式 的 最 佳 实践 和 使 用 。 


“ angular-hint-modules: 标记 出 未 使 用 的 module， 以 及 未 声明 的 module， 多 处 ng-app 声 明 等 更 多 关于 module 的 最 佳 实践 。 


' angular-hint-scopes: 包含 关于 $scope 使 用 的 最 佳 实践 。 


第 5 章 Angular 开 发 技巧 


“技巧 ”就 是 用 来 解决 特定 问题 的 经 验 。 “大 道 ” (最 佳 实践 ) 固然 是 必须 掌握 的 ，“ 人 小 道 ” (使 用 技巧 ) 也 很 有 用 。 


如 果 你 还 没有 被 “最 佳 实践 。 弄 得 精疲力竭 ， 那 么 可 以 系统 地 学 习 本 章 ， 否 则 建议 把 本 章 作 为 工具 书 ， 遇 到 相应 的 


将 问题 与 实际 需要 相 结 合 ， 能 让 你 理解 得 更 加 透彻 。 并 且 ， 我 们 也 建议 你 通过 写 代码 来 验证 它 。 


5.1 $timeout 的 妙用 


问题 再 来 这 里 查 。 


在 前 端 开 发 中 ， 经 常 需要 处 理 一 些 延 时 任务 。 比 如 为 了 防止 界面 停止 响应 而 将 一 些 费 时 的 任务 延 后 (Javascript 单 线程 执行 ) ， 或 是 要 等 一 些 DOM 元 素 出 现 后 才能 继续 。 这 时 通常 使 
window.setTimeout 来 专门 处 理 这 类 延 时 任务 。 在 Angular 的 应 用 中 也 能 用 window.setTimeout 吗 ? 


当然 可 以 ， 因 为 Angular 只 是 一 个 JavaScript 框 架 ， 也 运行 在 浏览 器 宿主 的 JavaScript 引 擎 里 。 但 是 ， 如 果 你 已 经 了 解 过 Angular 的 “ 脏 检查 ”机 制 ， 就 会 意识 到 : 在 延 时 任务 中 修改 被 绑 定 到 界面 中 的 
变量 ， 那 么 window.setTimeout 是 不 会 触发 “ 脏 检查 ”来 更 新 UI 界面 的 。 你 可 能 想 : 加 上 $scope.$apply 不 就 解决 了 嘛 。 是 的 ， 这 能 解决 UI 界面 更 新 的 问题 ， 但 是 你 可 能 会 遇见 另 一 个 问题 : 


Error: $digest already in progress 


这 是 怎么 回 事 儿 ? 哦 ，Angular 内 部 正在 进行 “ 脏 检 查 ”。 一 位 聪明 的 程序 员 巧妙 地 写 了 下 面 一 段 代码 来 解决 这 个 问题 : 


function safeApply(scope, fn) { 
(scope.$$phase || scope.$root.$$phase) ? fn(): scope.$apply (fn); 
} 


代码 中 ， 在 执行 apply 函 数 之 前 会 首先 检查 Angular 内 部 是 不 是 正在 做 “ 脏 检查 ” ， 如 果 是 就 直接 执行 函数 ， 不 用 $apply; 反之 没有 启动 脏 检查 ， 那 么 就 $apply 执 行 该 函数 。 呵 呵 ，“ 完 美 ”解决 ,不 是 
吗 ? 


$timeout 源 码 分 析 


请 注意 ， 笔 者 在 上 面 的 完美 两 个 字 上 加 了 引号 。Angular 已 经 为 我 们 内 置 了 4$timeout 服 务 ， 它 是 Angular 包 装 原生 Javascript window.setTimeout 而 实现 的 。 


先 来 看 看 Angular 内 部 关于 $timeout 的 实现 代码 : 


function $TimeoutProvider() { 
this.$get = ['$rootScope', '$browser', '$q', '$exceptionHandler', 

function ($rootScope, $browser, $q, $exceptionHandler) { 

var deferreds = {}; 

function timeout (fn, delay, invokeApply) { 

Var deferred = $q.defer(), 

promise = deferred.promise, 
skipApply = (isDefined (invokeApply) && !invokeApply), 


timeoutId; 
timeoutId = $browser.defer (function() { 
try { 


deferred.resolve (fn()); 
} catch(e) { 
deferred. reject (e); 
$exceptionHandler (e); 
} 
finally { 
delete deferreds [promise.$$timeoutId]; 


} 
if (!skipApply) $rootScope.$apply(); 


}, delay); 
promise.$$timeoutId = timeoutId; 
deferreds [timeoutId] = deferred; 


return promise; 
} 
timeout.cancel = function (promise) { 
if (promise && promise.$$timeoutId in deferreds) { 
deferreds [promise.$$timeoutId] .reject ('canceled'); 
delete deferreds [promise.$$timeoutId]; 
return $browser.defer.cancel (promise.$$timeoutId); 
} 
return false; 
Es 
return timeout; 
11; 
E 
function Browser (window, document, $log, $sniffer) { 
var self = this, 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/... 
self.defer = function (fn, delay) { 
var timeoutId; 
outstandingRequestCount++; 
timeoutId = setTimeout (function() { 
delete pendingDeferIds [timeoutId]; 
completeOutstandingRequest (fn); 
}, delay || 0); 
pendingDeferIds [timeoutId] = true; 
return timeoutId; 
Lad 
self.defer.cancel = function (deferId) { 
if (pendingDeferIds[deferId]) { 
delete pendingDeferIds[deferId]; 
clearTimeout (deferId); 
completeOutstandingRequest (noop); 
return truey 
} 
return false; 


i 


从 $timeout 和 附带 的 $browser 的 源码 中 能 了 解 到 : 
* Angular 在 $browser 中 封装 了 defer 和 defer.cancel 方 法 ， 它 们 分 别 是 封装 了 window.setTimeout 和 取消 window.setTimeout 的 任务 。 封 装 在 这 里 便于 针对 不 同 浏览 器 的 黏合 。 


“ $timeout 服 务 利用 $browser 中 封装 了 defer 和 defer.cancel 方 法 ， 再 次 将 window.setTimeout 封 装 为 Promise 的 方法 ， 而 且 可 以 使 用 .then 方 法 注册 接受 延 时 回调 的 返回 值 。 并 可 以 用 $timeout.cancel (promise) 取 
消 这 次 延 时 任务 。 


“ 在 $timeout 中 ， 接 受 延 时 任务 的 回调 函数 、 延 时 毫秒 时 间 间 隔 ， 以 及 是 否 需要 调用 $apply 的 标记 参数 。 对 于 延 时 毫秒 时 间 间 隔 默认 值 为 0， 即 当前 任务 完成 ， 线 程 空 闲 后 立即 执行 。abply 的 标记 参数 则 默 
认为 true， 需 要 调用 $apply 机 制 ， 注 意 这 里 启动 “ 脏 检查 ”会 在 当前 任务 完成 ， 线 程 空闲 时 才 执 行 ， 所 以 不 会 出 现 前 面 “Error: $digest already in progress” 的 问题 。 


在 这 里 需要 特别 说 明 的 是 ，4timeout 也 是 一 个 便于 进行 单元 测试 的 服务 组 件 ， 在 ngMock 中 会 为 $timeout 添 加 一 个 flush 方 法 ; 将 放 在 队列 中 的 延 时 任务 全 部 立即 执行 一 遍 ， 这 样 就 将 异步 延 时 的 任务 
变 为 同步 ， 以 便 在 Angular 的 单元 测试 中 更 好 地 测试 应 用 的 业务 组 件 。 从 下 面 来 自 angular-mock 文 件 的 angular.mock.$Browser 方 法 中 关于 defer 的 定义 也 能 看 出 : 


angular.mock.SBrowser = function() { 
var self = this; 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/... 
this.isMock = true; 
self.defer = function (fn, delay) { 
delay = delay || 0; 
self.deferredFns.push ({ 
time: (self.defer.now + delay), 
En Tne 
id: self.deferredNextId 
DD); 
self.deferredFns.sort (function(a, b) { 
return a.time - b.time; 


1D); 


return self.deferredNextIdt++; 


self.defer.now = 0; 
self.defer.cancel = function(deferId) { 
Var fnIndex; 
angular. forEach (self.deferredFns, function(fn, index) { 
if (fn.id === deferId) fnIndex = index; 


DD); 

if (fnIndex !== undefined) { 
self.deferredFns.splice (fnIindex, 1); 
return true} 


return false; 
i 
self.defer.flush = function(delay) { 
if (angular.isDefined(delay)) { 
self.defer.now += delay; 
} else { 
if (self.deferredFns.length) { 


self.defer.now = self.deferredFns[self.deferredFns.length - 1].time; 


} else { 
throw new Error ('No deferred tasks to be flushed'); 


} 


} 
while (self.deferredFns.length && self.deferredFns[0] .time <= self.defer.now) { 


self.deferredFns.shift() .fn(); 
} 


$timeout 不 仅 可 以 用 于 延 时 任务 window.setTimeout 的 封装 ， 而 且 在 对 第 三 方 的 JavaScript 组 件 (特别 是 jQuery 的 组 件 ， 它 们 常常 需要 等 待 DOM 节 点 的 出 现 ) 封装 的 时 候 也 很 有 


手动 


。 在 需 


scope.$apply 启动 脏 检查 更 新 Ul 界面) 的 应 用 场景 下 ， 都 可 以 利用 $timeout 或 者 $scope.$evalAsync 的 延 时 和 默认 $apply 机 制 来 巧妙 地 解决 这 类 问题 。 


档 http://docs.ngnice.com/api/ng/service/$interval。 在 使 用 $interval 服 务 之 前 ， 请 确认 是 否 真 的 需要 使 


另外 ， 对 设置 定时 器 的 window.setlnterva| 方 法 ，Angular 也 内 置 了 $interval 服 务 ， 希 望 大 家 也 不 要 重 造 轮子 了 ， 感 兴趣 的 读者 可 以 阅读 ngnice 的 API 文 


更 好 的 性 能 优势 ， 但 受 限 于 浏览 器 和 服务 端的 兼容 性 问题 。 


最 后 笔者 还 希望 多 嘴 劝 几 句 : $timeout 有 很 多 妙用 ， 但 一 定 不 要 滥用 ，$timeout 实 现 apply 功 能 不 应 该 是 我 们 的 第 一 方案 ， 第 一 方案 仍然 应 该 是 使 用 Angular 内 置 的 指令 。 


5.2 ngTemplate 寄 宿 方式 


对 于 Angular 的 指令 ， 我 们 经 常 需要 定义 模板 (Directive 中 的 template 或 templateUrl) ， 可 以 选择 将 HTML 模 板 放 在 真实 的 Web 容 器 中 寄宿 ， 也 可 以 选 
放 在 view 的 page 之 上 ,或 者 将 所 有 的 HTML 模 板 打 成 一 个 JavaScript 文 件 ， 并 与 应 


直接 寄宿 在 Web 容 器 的 方式 比较 简单 ， 可 以 直接 


程序 的 JavaScript 合 并 成 一 个 JavaScript 文 件 一 起 发 布 。 


海 其 单独 部 署 在 Tomcat、lIS、Nginx， 或 者 Nodejs Express、Spring MVC 这 类 Web 服 务 器 端 框架 资源 


在 Angular 中 还 可 以 使 用 另 一 种 方式 寄宿 Angular 的 模板 ， 它 就 是 ngTemplate 模 板 ， 我 们 可 以 这 样 在 主页 面 中 定义 它 : 


<script type="text/ng-template" id="/tpl.html"> 
Content of the template. 
</script> 


$interval， 以 及 是 否 可 以 尝试 使 用 HTML5WebSocket 奉 代 来 代替 它 。HTML5WebSocket 具 有 


择 Angular 的 ngTemplate 方 式 ， 将 HTML 模 板 


录 下 。 这 并 没什么 可 以 多 说 的 ， 所 以 我 们 跳 


directive、route、ng-include 等 使 用 。 


URL 对 应 的 模板 数据 : 


对 于 声明 在 主页 面 上 的 Angular 模 板 ， 它 们 将 会 在 compile 阶 段 被 Angular 程 序 解析 ， 并 存放 在 $templateCache 模 板 缓存 服务 中 。 


var scriptDirective = ['$templateCache', function($templateCache) { 


return { 

restrict: ‘'E', 

terminal: true, 

compile: function (element，attr) { 

if (attr.type == 'text/ng-template') { 

Var templateUr] = attr.id, 
text = element [0] .text; 
$templateCache .put (templateUrl, text); 


这 是 Angular 中 内 置 的 script 标 签 ， 它 会 在 compile 阶 段 遍历 所 有 的 script 标 签 ， 当 script 类 型 为 text/ng-template 时 ，Angular 会 将 其 内 容 (innerHTML) 存放 在 $templateCache 服 务 中 ， 供 后 面 的 


$templateCache 模 板 缓存 服务 ， 顾 名 思 义 ， 是 Angular 为 了 对 HTML 模 板 进行 缓存 而 创建 的 服务 。Angular 在 发 送 HTML 模 板 加 载 请 求 前 ， 首 先 会 尝试 从 $templateCache 缓 存 中 查找 是 否 有 与 所 请 求 的 


StemplateCache.get ('templateId.html') 


如 果 找到 了 ， 则 直接 使 用 缓存 中 HTML 模 板 ， 而 不 再 发 送 Ajax 请 求 去 获取 HTML 模 板 。 对 了 


FF 所 有 的 指令 和 模板 Angular 默 认 会 启用 $templateCache 缓 存 。 如 下 面 这 段 来 
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templateUrl = $sce.getTrustedResourceUrl] (templateUr1) 7 
if (angular.isDefined (templateUr1l)) { 
next .loadedTemplateUrl = templateUrl; 
template = $http.get (templateUrl, {cache: $templateCache}). 
then (function (response) { return response.data; }); 


} 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/... 


我 们 经 常 提 到 SPA (Single Page Application) ， 就 是 把 View 的 显示 处 


理 等 表现 


业务 逻辑 可 以 被 多 个 客户 应 用 所 使 用 : 它 可 以 被 浏览 器 为 主 的 Web 应 用 所 使 


和 


了 进一步 提升 性 能 ， 我 们 还 可 以 把 这 类 静态 资源 分 离 部 署 ， 利 


的 ， 将 View 的 逻辑 分 离开 ， 留 给 适应 不 同 场景 的 客户 端 分 别 实现 ， 这 将 是 更 好 | 


， 也 可 以 被 WinForm 为 3 


的 解决 方案 。 


自 route 模 板 加 载 的 代码 : 


层 逻 辑 都 推 到 前 端 ， 而 后 端 提供 只 与 数据 和 业务 相关 的 RESTful 
， 也 可 以 被 移动 APP 客 户 端 程序 所 使 用 。 数 据 和 业务 等 核心 逻辑 是 可 以 被 共享 


的 桌面 GUI 程序 所 使 


回 到 9templateCache， 对 于 一 个 应 用 程序 View 逻 辑 的 分 离 ，HTML、Javascript、CSS 这 类 资源 是 静态 的 ， 是 不 会 发 生变 化 的 ， 我 们 可 以 
Nginx 等 反 向 代理 服务 器 或 者 CDN 服 务 ， 让 我 们 的 应 用 程序 获取 更 好 的 响应 速度 与 延 


APl。 这 样 ， 对 于 一 个 应 用 程序 来 说 ， 


来 处 理 数据 的 


展 性 。 


自由 地 缓存 在 客户 端 。 这 样 可 以 减少 与 服务 器 的 交互 ， 甚 至 为 


在 Angular 中 ， 还 有 一 种 编译 HTML 的 方式 ， 那 就 是 ng-html2js。 理 解 了 $templateCachel 


的 工作 原理 ， 就 很 容易 理解 html2js 的 工作 原理 了 。 它 与 ngTemplate 不 同 的 是 ，ngTemplate 是 Angular 在 


compile 的 时 候 自动 加 入 gtemplateCache 缓 存 服务 中 的 ，html2js 则 是 我 们 依靠 build 过 程 ， 在 : 


发 阶段 将 


编译 为 JavaScript 代 码 放 入 $templateCache 服 务 中 的 。 编 译 的 结果 如 下 面 的 例子 所 示 : 


angular.module ('com.ngnice.app') .run(['$templateCache', function($templateCache) { 
$templateCache .put ('templateId.html', 
"This is the content of the template' 
); 
11); 


它 将 一 堆 HTML 文 件 打包 成 一 个 JavaScript 文 件 ， 以 相对 于 应 F 


程序 根 目录 的 路 径 为 jd，HTML 内 容 为 value 存 储 在 ytemplateCache 服 务 中 。 


这 一 类 插件 有 : grunt-html2js、gulp-html2js，karma 单 元 测试 的 karma-ng-html2js-preprocessor 等 。gulp-html2js 的 配置 代码 如 下 : 


Var concat = require('gulp-concat') 
Var html2js = require('gulp-html2js') 
gulp.task('scripts', function() { 
gulp.src('fixtures/*.html') 
.Pipe (html2js ({ 
outputModuleName: 
USseStrict: true 
})) 
.Pipe (concat ('template.js')) 
.Pipe (gulp.dest ('./')) 


'template-test', 


1D); 


5.3 ”在 非 独 立 作用 域 指令 中 实现 scope 绑 定 


假设 我 们 有 一 个 指令 的 使 


形式 如 下 : 


<some-directive name="1+1" value="1+1" on-event="vm.test (age)"></some-directive> 


当 我 们 自 定义 指令 时 ， 可 以 通过 scope 表 达 式 进行 绑 定 ， 如 : 


directive('someDirective', function() { 
return { 


http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/... 


scope: { 
name: '@'， // 绑 定 字面 量 ， 把 值 作为 字符 串 进 行 解释 
value: '='，// 绑 定 变量 ， 把 值 作为 scope 上 的 表达 式 进行 解释 
onEvent: '&'，// 绑 定 事件 ， 调 用 方式 为 on-event (value) 或 on-event ($event, value) 


} 
DD); 


非常 简单 易 懂 ， 但 是 这 种 方式 有 一 个 问题 : scope: 人 的 形式 ， 让 这 个 指令 自动 具有 了 独立 作 


显然 ， 对 于 装饰 器 型 指令 来 说 ， 这 是 无 法 接受 的 。 解 决 方案 是 不 使 


绑 定 name 属 性 非常 简单 : attrs.name， 因 为 它 是 字面 量 ， 我 们 只 需 


域 (isolated scope) ， 而 这 将 导致 无 法 在 同一 个 元 素 上 使 用 其 他 需 


通过 attrs 直 接 获 得 字符 串 即 可 ， 于 是 我 们 得 到 一 个 字符 串 : 


作 


域 的 指令 。 


scope 绑 定 表 达 式 ， 而 是 自己 来 达到 类 似 的 效果 。 


1+1。 


绑 定 value 属 性 我 们 需要 一 个 新 的 函数 的 帮 


域 上 计算 value 对 应 


屿 : scope.$eval (attrs.value) 。 它 会 在 指令 的 当前 作 | 


的 表达 式 ， 于 是 我 们 得 到 一 个 数字 : 2。 


绑 定 event 属 性 时 ， 表 达 式 如 下 : scope.$eval (attrs.onEvent, {$event: event, age: 30}) 。 
参数 ， 第 一 个 是 要 计算 的 表达 式 ， 第 二 个 是 计算 这 个 表达 式 时 可 以 访问 的 额外 变量 。 比 如 在 使 


一 


量 ， 这 里 只 访问 了 age 变量 。 


接 下 来 ，Angular 在 这 个 scope 上 把 onEvent 的 值 vm.test (age) 作为 一 个 表达 式 进 行 解 释 ， 这 个 表达 式 的 参数 是 一 个 叫 age 的 变量 ， 


为 参数 传 进去 。 这 也 就 是 vm.test 函 数 所 接收 到 的 参数 : 30。 


5.4 ”表单 验证 错误 信息 显示 


在 传统 的 Angular 方 式 下 ， 我 们 用 这 样 的 方式 显示 表单 错误 信息 : 


on-event (age) 的 方式 调 有 


而 on-event ($event，age) 、on-event (age，$event) 、on-event (123，$event) 之 类 


蛙 解 这 个 表达 式 的 工作 原理 就 有 点 复杂 了 。 首 先 要 明白 : scope.$eval 是 一 个 函数 ， 它 可 以 接受 两 个 
时 ， 除 了 可 以 使 用 scope 中 的 变量 之 外 ， 还 可 以 访问 $event 和 age 这 两 个 变 
的 都 是 合法 的 调用 形式 。 


于 是 Angular 就 从 scope 和 额外 变量 上 找到 这 个 名 叫 age 的 属性 ， 作 


<form name="form" class="css-form" novalidate> 
Name: 
<input type="text" ng-model="user.name" name="uName" required /><br /> 
E-mail: 
<input type="email" ng-model="user.email" name="uEmail" required/><br /> 
<div ng-show="form.uEmail.$dirty && form.uEemail.$invalid">Invalid: 
<span ng-show="form.uEmail.$error.required">Tell us your email.</span> 
<span ng-show="form.uEmail.S$error.email">This is not a valid email.</span> 
</div> 
Gender: <input type="radio" ng-model="user.gender" value="male" />male 
<input type="radio" ng-model="user.gender" value="female" />female<br /> 
<input type="checkbox" ng-model="user.agree" name="userAgree" required /> 
I agree: <input ng-show="user.agree" type="text" ng-model="user.agreeSign" 
required /><br /> 
<div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div> 
<button ng-click="reset ()" ng-disabled="isUnchanged (user) ">RESET</button> 
<button ng-click="update (user)" 
ng-disabled="form. $invalid || isUnchanged (user)">SAVE</button> 
</form> 


在 小 规模 项 目 中 ， 这 已 经 足够 了 。 但 在 大 规模 项 目下 ， 这 样 写 不 但 繁琐 ， 还 容易 导致 一 些 不 一 致 ， 比 如 同样 是 校 验 最 小 长 度 ， 这 个 页 面 写 的 可 能 是 “不 能 少 于 xx 字符 ”， 另 一 个 页 面 写 的 就 是 “至 少 需 


要 xx 字符 ”。 


怎么 办 呢 ? 最 简单 的 方式 是 写 一 个 自 定义 指令 ， 这 个 指令 接收 FormControl 对 象 ， 并 显示 错误 信息 ， 


<form name="form" class="css-form" novalidate> 


如 : 
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E-mail: 
<input type="email" ng-model="user.email" name="uEmail" required/><br /> 
<error-info field="form.uEmail"></error-info> 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/... 
</form> 


在 error-info 指 令 中 ， 我 们 可 以 根据 field 属 性 的 值 显示 不 同 的 内 容 。 


更 进一步 ， 如 果 我 们 连 表单 和 这 些 字 段 的 name 属 性 都 不 想 要 呢 ? field 的 值 ， 也 就 是 form.uEmail， 实 际 上 就 是 这 个 输入 框 的 NgModelController 对 象 。 即 使 不 通过 名 字 ， 我 们 也 可 以 在 指令 中 取得 
它 ， 取 得 的 方式 就 是 指令 定义 对 象 的 require 属 性 。 


angular.module ('com.ngnice.app') .directive('fieldError', function () { 
return { 
restrict: 'A', 
require: 'ngModel', 
link: function (scope, element, attrs, ngModel) { 
// TODO: 根据 ngMode1 中 的 Serror， 决 定 泻 染 哪些 错误 信息 
} 


这 里 取得 了 $error， 但 是 我 们 还 缺少 一 个 地 方 来 显示 它 。 这 时 候 ， 我 们 可 以 自己 创建 一 个 DOM 节 点 ， 然 后 把 它 插入 到 当前 节点 (element) 的 后 面 。 但 是 在 这 个 节点 我 们 不 需要 通过 jQuery 的 方式 来 组 
装 ， 而 应 该 使 用 Angular 的 方式 ， 通 过 $compile 服 务 根据 模板 创建 它 。 还 记得 前 面 章节 中 提 到 的 $compile 服 务 吗 ? 我 把 这 一 步 作为 作业 留 给 你 ， 尝 试 自行 实现 它 吧 ! 


这 种 方式 简化 了 写 页 面 的 复杂 度 ， 只 要 给 带 ngModel 的 元 素 上 附加 一 个 装饰 器 型 指令 field-error 就 行 了 ， 但 是 它 牺牲 了 灵活 性 ， 比 如 错误 信息 总 是 被 插入 当前 节点 后 面 ， 有 时 候 这 会 给 CSS 的 书写 带 来 
一 些 问题 。 


在 具体 的 项 目 中 ， 选 择 哪 种 方式 就 要 根据 使 用 场景 进行 权衡 了 。 


5.5 Angular 中 的 AOP 机 制 


在 软件 设计 中 ，AOP 是 Aspect-Oriented Programming 的 缩写 ， 意 为 面向 切面 编程 。 通 过 编译 时 (Compile) 植 入 代码 、 运 行 期 (Runtime) 动态 代理 ， 以 及 框架 提供 管道 式 执行 等 策略 实现 程序 通 
功能 与 业务 模块 的 分 离 ， 统 一 处 理 、 维 护 的 一 种 解 耦 设计 。AOP 是 OOP 的 延续 ， 是 软件 开发 中 的 一 个 热点 ， 也 是 很 多 服务 端 框架 (如 Java 世 界 的 Spring) 中 的 核心 内 容 之 一 ， 是 函数 式 编程 的 一 种 衍生 范 
型 。 利 用 AOP 可 以 对 业务 逻辑 的 各 个 部 分 进行 隔离 ， 从 而 降低 业务 逻辑 各 部 分 之 间 的 耦合 度 ， 提 高 程序 的 可 重用 性 ， 同 时 提高 开发 效率 。AOP 实 用 的 场景 主要 有 : 权限 控制 、 日 志 模块 、 事 务 处 理 、 性 能 统 
计 、 异 常 处 理 等 独立 、 通 用 的 非 业务 模块 。 关 于 更 多 的 AOP 资 料 请 参考 http://en.wikipedia.org/wiki/Aspect-oriented_programming。 


在 Angular 中 同样 也 内 置 了 一 些 AOP 的 设计 思想 ， 便 于 实现 程序 通用 功能 与 业务 模块 的 分 离 、 解 耦 、 统 一 处 理 和 维护 。$http 中 的 拦截 器 (interceptors) 和 装饰 器 ($provide.decorator) 是 Angular 
中 两 类 常见 的 AOP 切 入 点 。 前 者 以 管道 式 执行 策略 实现 ， 而 后 者 则 通过 运行 时 的 动态 代理 实现 。 


5.6 ”Ajax 请 求 和 响应 数据 的 转换 


在 使 用 Angular 作 为 前 端 应 用 框架 的 架构 中 ， 我 们 推荐 使 用 单 页 面 应 用 (Single Page Application) 的 架构 方式 ， 同 时 推荐 使 用 基于 JSON 方 式 的 Ajax 调用 来 与 远程 服务 交互 。 在 Angular 中 这 一 套 最 佳 
实践 也 被 默认 实现 ，Angular 内 置 了 $http 和 $resource 来 处 理 Ajax 请 求 ， 并 且 它 们 都 是 默认 基于 JSON 的 数据 传递 方式 。$http 在 Angular 开 发 中 作为 最 基础 的 Ajax 请 求 服务 ， 能 够 处 理 所 有 的 Ajax 请 求 ; 而 
$resource 则 是 基于 $http 之 上 ， 专 门 为 简化 Restful 架 构 风 格 而 设计 的 ， 使 用 的 面 比 $http 更 窗 一 些 。 从 这 里 也 能 看 出 Angular 推 荐 大 家 使 用 RESTful 的 架构 风格 。 


5.7 ”在 代码 中 注入 Filter 


在 第 2 章 中 ， 我 们 已 经 了 解 到 过 滤器 (Filter) 是 对 视图 模板 中 变量 的 格式 化 利器 ， 它 接收 一 组 输入 (格式 化 变量 和 格式 化 参数 ) 并 得 到 一 个 特定 输出 ) 过 滤器 利用 “| ”作为 分 隔 符 ， 可 以 用 类 似 UNIX 
管道 的 语法 ， 形 成 输入 、 输 出 的 连续 传递 。 


同时 ， 过 滤器 也 是 一 种 特殊 的 服务 。 在 Angular 中 所 有 的 过 滤器 都 会 以 名 称 加 上 “Filter” 后 缀 为 服务 名 称 注册 成 一 个 服务 ， 同 时 ， 还 能 通过 $filter 服 务 访问 这 个 Filter 对 象 。 因 此 ， 我 们 可 以 在 
Controller 或 Service 这 类 代码 中 注入 相应 的 Filter 服 务 来 重用 它 ; 还 可 以 注入 $filter 服 务 ， 然 后 通过 Filter 名 称 获取 指定 的 Filter 对 象 。 


5.8 防止 Angular 表 达 式 闪烁 


在 Chrome 这 样 能 快速 解析 的 浏览 器 上 或 网 速 比较 慢 的 时 候 ， 页 面 上 会 出 现 Angular 表 达 式 {{fexpressj}) 闪 烁 的 情况 ， 这 样 对 于 用 户 的 体验 来 说 不 够 友好 。 


这 是 因为 我 们 利用 Javascript 操 作 DOM ， 都 需要 等 待 DOM 加 载 完成 (DOM ready) 。Angular 也 会 在 DOM ready 完 成 后 才 会 去 解析 页 面 上 的 视图 模板 ， 在 Angular 开 始 工作 之 前 ， 用 户 会 看 到 表达 式 
本 身 ， 之 后 才 被 替换 为 表达 式 的 求 值 结果 。 


5.9 ”实现 前 端 权限 控制 


在 工程 实践 中 ， 有 很 多 项 目 需要 对 权限 进行 控制 。 


在 前 后 端 合 一 的 传统 架构 下 ， 已 经 有 了 很 成 熟 的 解决 方案 : 后 端 判断 权限 ， 然 后 跳 转 到 “登录 ”页 或 “拒绝 访问 ”页 。 而 前 后 端 分 离 的 新 架构 下 ， 这 种 方案 就 不 能 工作 了 ， 因 为 页 面 完 全 是 静态 文件 ， 
它 被 缓存 在 用 户 的 浏览 器 中 ， 后 端 只 提供 AP1， 然 后 前 端 把 它 的 返回 结果 演 染 出 来 。 更 重要 的 是 ， 前 端的 路 由 转换 不 会 再 通知 后 端 ， 后 端 跳 转 也 就 无 从 谈 起 。 


这 种 新 的 挑战 ， 也 需要 新 的 解决 方案 ， 来 实现 认证 和 鉴 权 。 不 过 ， 解 决 这 个 问题 并 没有 那么 难 。 


虽然 后 端的 控制 力 被 削弱 ， 但 是 前 端的 控制 力 却 被 大 大 加 强 了 一 一 这 是 好 事 ， 后 端 本 来 就 应 该 提供 纯净 的 业务 AP1， 而 不 应 该 关心 交互 逻辑 ， 某 种 意义 上 ， 以 前 的 方案 才 是 折 中 之 举 。 而 现在 ， 我 们 把 
交互 逻辑 还 给 了 前 端 ， 后 端 所 要 做 的 只 是 给 出 正确 的 返回 码 ， 比 如 : 对 于 一 个 需要 登录 的 AP1， 它 应 该 直接 返回 401， 而 不 用 关心 跳 转 到 哪里 ， 对 于 当前 用 户 无 权 调用 的 AP1， 它 应 该 直接 返回 403， 而 不 用 关 
心 显示 成 什么 样 。 


这 种 场景 下 ，Angular 给 出 的 解决 方案 是 yhttp 的 interceptor。 因 为 每 一 个 后 端 APl 都 会 直接 或 间接 通过 $http 来 调用 ， 所 以 只 要 我 们 写 一 个 Interceptor， 来 拦截 responseError， 就 能 知道 服务 器 端 发 回 
的 每 一 条 错误 信息 。 只 要 对 这 些 错误 信息 中 的 状态 码 进行 判断 ， 就 可 以 进行 统一 处 理 。 例 如 : 收 到 404 就 弹出 一 个 对 话 框 ， 告 诉 用 户 这 个 api 不 存在 ; 如 果 收 到 500 就 可 以 给 客户 显示 出 错误 详情 ; 如 果 收 到 
的 是 401， 就 可 以 弹出 一 个 对 话 框 来 要 求 用 户 登录 ， 这 样 ， 用 户 不 需要 跳 转 到 其 他 页 就 可 以 完成 登录 逻辑 ， 这 个 过 程 中 不 需要 路 由 切换 ， 也 就 不 需要 保存 任何 状态 。 这 种 方式 最 妙 的 是 : 我 们 可 以 通过 
promise 机 制 来 让 登录 过 程 对 调用 者 透明 ， 就 像 在 “从 实战 开始 ”中 给 出 的 范例 一 样 。 


但 是 ， 有 些 情况 下 我 们 可 能 希望 用 户 连 这 个 路 由 都 不 要 进来 。 这 时 ， 只 让 后 端 APl 来 控制 权限 的 方式 就 不 够 了 。 有 两 种 方案 可 以 解决 这 个 问题 ， 本 文 只 以 路 由 库 ui-router 为 例 讲解 ，ngRoute 的 实现 方 
式 是 非常 相似 的 。 


5.10 ”依赖 注入 一 一 $injector 


Angular 中 给 我 们 带 来 了 一 种 另类 的 代码 组 织 方式 : 依赖 注入 。 依 赖 注入 ， 是 一 种 软件 设计 模式 原则 ， 即 DIP (依赖 倒置 原则 ) ， 描 述 组 件 之 间 高 层 组 件 不 应 该 依赖 于 底层 组 件 。 依 赖 倒 置 是 指 实现 和 接 
口 倒置 ， 采 用 自 顶 向 下 的 方式 关注 所 需 的 底层 组 件 接口 ， 而 不 是 其 实现 。 如 果 你 想 更 多 的 了 解 IOC 和 DI 请 参见 Martin Fowler 的 《Inversion of Control Containers and the Dependency Injection 
pattern》。 


5.11 在 指令 中 让 使 用 者 自 定义 模板 


有 时 候 ， 指 令 的 设计 者 并 不 能 预知 指令 的 最 终 外 观 ， 比 如 我 们 要 设计 一 个 “标签 组 ” (tab set) 指令 ,我 们 期 望 的 结构 是 这 样 的 : 


<tab-set> 
<tab-item ng-repeat="account in vm.accounts"> 
{{account.name}} <!-- 邮箱 名 --> 
<small class="badge">{{account.count}} <!-- 新 邮件 数量 --></small> 
</tab-item> 
</tab-set> 


其 中 页 标签 的 内 容 应 该 由 使 用 者 来 定 。 


显然 ， 如 果 用 属性 绑 定 的 方式 把 模板 传 给 tab-item 指 令 ， 将 会 变 得 非常 难看 。 对 这 种 场景 ，Angular 提 供 了 一 种 叫 作 transclude 的 机 制 。transclude 是 一 个 生 造 的 词 ， 大 意 为 “ 透 传 ”。 接 下 来 我 们 就 
来 实现 tab-set 和 tab-item 指 令 ， 你 将 会 看 到 它 是 如 何 解决 这 个 问题 的 。 


我 们 先 来 定义 数据 : 


vm.accounts = [ 
name: 'tabl', 


count: 1 


name: 'tab2', 
count: 2 


接 下 来 实现 tab-set 指 令 : 


tab/set.html: 


tab/set.html: 
<ul ng-transclude class="nav nav-tabs"> 
</ul> 


tab/set.js: 


angular.module ('com.ngnice.app') .controller ('TabSetComponentCtrl', function ($scope) { 
var wm = $scope.vwm = {} 
]) 
angular.module ('com.ngnice.app') .directive('tabSet', function () { 
return { 
restrict: 'E', 
scope: {}, 
transclude: true, 
replace: true, 
templateUrl: 'components/tab/set.html', 
controller: 'TabSetComponentCtrl' 
Lad 


document .createElement ('tab-set'); 


模板 非常 简单 ， 它 的 作用 就 是 生成 一 个 ul 元 素 ， 并 且 给 这 个 元 素 加 上 bootstrap 中 的 nav 和 nav-tabs 类 。 但 是 注意 ng-transclude 指 令 ， 它 的 含义 就 是 把 tab-set 指 令 所 包含 的 节点 “ 透 传 ” 过 来 。 也 就 相 
当 于 模板 变 成 了 : 


<ul class="nav nav-tabs"> 
<tab-item ng-repeat="account in vm.accounts"> 
{{account.name}} <!-- 邮箱 名 --> 
<small class="badge">{{account.count}} <!-- 新 邮件 数量 --></small> 
</tab-item> 
</ul> 


但 是 要 注意 ，vm.accounts 来 自 于 使 用 者 的 作用 域 ， 但 我 们 已 经 通过 scope: 人 0 属性 创建 了 一 个 独立 作用 域 ， 按 理 说 是 访问 不 到 它 的 。 为 什么 我 们 透 传 过 来 的 模板 中 却 可 以 访问 它 ? 这 就 是 transclude: 


true 属 性 的 作用 。 它 的 作用 是 让 通过 ng-transclude 透 传 过 来 的 模板 可 以 访问 外 部 作用 域 ， 而 不 是 内 部 作用 域 。 当 然 ，ng-transclude 之 外 的 部 分 不 受 影响 。 比 如 : 


假设 我 们 在 tab-set 的 作用 域 上 放 了 一 个 属性 : 


angular.module ('com.ngnice.app') .controller ('TabSetComponentCtrl', function ($scope) { 
Var wm = $scope.vm = {}; 
// 增加 一 个 type 属 性 ， 用 以 表示 标签 的 类 型 。 
wm.type = 'tabs'; 

DD); 


那么 可 以 在 指令 自身 的 模板 中 正常 访问 它 : 


<ul ng-transclude class="nav nav-{{vm.type}}"> 
</ul> 


但 是 透 传 过 来 的 模板 中 却 不 能 访问 这 个 vm.type 属 性 。 


通俗 地 讲 ，transclude: true 和 ng-transclude 指 令 一 起 ， 把 指令 包含 的 模板 ,以 及 它 原本 的 作用 域 ， 一 起 透 传 了 进来 。 
tab-item 指 令 的 实现 也 与 此 相似 : 


tab/item.html: 


<1i ng-click="vm.activate()" ng-class="{active: vm.isActive}"> 
<a href="javascript:void(0)" ng-transclude> 
</a> 

</1i> 

tab/item.js: 


angular.module ('com.ngnice.app') .controller ('TabItemComponentCtrl', function ($scope) { 
Var wm = $scope.vwm = {}; 
wm.isActive = false; 
vm.activate = function() { 
vm.isActive = true; 
Ed 
Ds 


angular.module ('com.ngnice.app') .directive('tabItem', function () { 
return { 
Testrict: 'E', 
scope: {}, 


transclude: true, 
replace: true, 
templateUrl: 'components/tab/item.html', 
controller: "TabItemComponentCtr1 1 
] 7 
]) 
document .createElement ('tab-item'); 


transclude 部 分 与 tab-set 的 实现 非常 相似 ， 但 是 我 们 给 这 个 tab-item 增 加 了 一 个 点 击 时 激活 (高 亮 ) 的 行为 ， 这 体现 的 就 是 刚刚 提 到 的 作用 域 问题 : 模板 中 ng-transclude 之 外 的 部 分 只 能 访问 当前 指 
令 的 作用 域 ， 而 透 传 过 来 的 模板 只 能 访问 指令 的 外 部 作用 域 。 


至 此 ， 通 过 transclude 实 现 自 定 义 模板 的 功能 就 实现 完了 。 


不 过 还 有 一 个 问题 : 我 们 点 击 了 之 后 ， 当 前 页 标签 被 激活 了 ， 但 是 其 他 页 标签 并 没有 被 取消 激活 。 这 是 因为 每 个 tab-item 都 不 知道 其 他 tab-item 的 存在 ， 所 以 无 法 相互 通讯 。 要 解决 这 个 问题 ， 就 需要 
让 它们 能 互相 通讯 。 最 简单 的 方式 是 借助 消息 机 制 : 


angular.module ('com.ngnice.app') .controller ('TabItemComponentController', function ($scope) { 


var wm = $scope.wm = {}; 
wm.isActive = false; 
vm.activate = function () { 


vm.isActive = true; 
// $parent 是 ng-repeat 的 scope，$parent.$parent 则 是 tab-set 的 scope 
// 在 这 里 广播 一 个 消息 ， 则 tab-set 下 的 所 有 tab-item 都 会 收 到 
$scope. $parent.$parent. $broadcast ('active', $scope); 
}; 
vm.deactivate = function () { 
vm.isActive = false; 
过 
$scope.$on('active', function (event, activeScope) { 
// 如 果 自 己 不 是 活动 scope， 则 把 自己 取消 激活 
if (activeScope !== $scope) { 
vm.deactivate (); 
} 
a 
DD); 


如 果 上 下 级 指令 之 间 需 要 更 加 复杂 的 交互 ， 那 么 可 以 通过 指令 的 require 机 制 让 下 级 指令 调用 上 级 指令 的 变量 和 函数 。 这 种 情况 下 ， 需 要 重新 分 配 tab-set 和 tab-item 的 职责 : 


tab/set.js: 


angular.module ('com.ngnice.app') .controller ('TabSetComponentController', function () { 
// 保存 所 有 的 tab 列 表 
var tabs = []; 
this.register = function(tab) { 
tabs .push (tab); 
jy 
this.revoke = function(tab) { 
tabs.splice (tabs.indexOf (tab), 1); 
}; 
this.activate = function (activeTab) { 
// 激活 选中 的 ， 其 他 都 取消 激活 
angular. forEach (tabs, function(tab) { 
tab.vm.active = tab =—= activeTab; 
DD); 
这 
Ds 


tab/item.js: 


angular.module ('com.ngnice.app') .controller ('TabItemComponentController', function ($scope) { 
Var wm = $scope.wm = {}; 
vm.active = false; 
vm.activate = function () { 
$scope.tabSet .activate ($scope); 
1 


Ds 
angular.module ('com.ngnice.app') .directive('tabItem', function () { 
return { 
Tentriots ‘Rr 
scope: {}, 
transclude: true, 
require: '^tabset', 
replace: true, 
templateUrl: 'components/tab/item.html', 
controller: 'TabItemComponentController', 
link: function(scope, element, attrs, tabSet) { 
SCcope.tabSet = tabset; 
// 把 自己 注册 tab 列 表 
tabSet .register (scope); 
// 当前 指令 被 销毁 时 ， 从 tab 列 表 中 移 除 
scope.$on('$destroy', function() { 
tabSet .revoke (scope); 
]) 
} 
}; 
3 
document .createElement ('tab-item'); 


不 过 ,指令 嵌 套 会 让 上 下 级 指令 焰 合 在 一 起 ， 更 好 的 方式 是 封装 成 实现 交互 逻辑 的 服务 ， 让 DOM 来 绑 定 此 服务 中 的 属性 和 方法 。 具 体 的 实现 可 以 参见 “从 实战 开始 ”的 “实现 主题 树 ”。 


5.12 ” 跨 多 个 节点 的 ng-if 或 ng-repeat 


有 时 候 我 们 需要 对 多 个 元 素 进 行 条件 显 示 或 循环 ， 常 规 的 方式 是 在 这 些 元 素 外 面 套 一 个 元 素 ( 即 : 包装 元 素 ) ， 如 : 


<div ng-if="visible"> 
<div>name</div> 
<div>value</div> 
</div> 


但 是 ， 这 种 方式 并 非 总 能 奏效 ， 如 : 


<ul> 
<li>name</1i> 
<li>value</1i> 
</ul> 


<ul> 
<div ng-if="visible"> 
<1li>name</1i> 
<li>value</1i> 
</div> 
</ul> 


这 是 因为 有 些 HTML 元 素 是 严格 谋 套 的 ， 例 如 ul 下 面 只 能 嵌 套 li， 而 不 能 嵌 套 div， 破 坏 了 这 种 谋 套 ， 不 但 会 因为 浏览 器 容错 能 力 不 同 而 导致 兼容 性 问题 ， 而 且 会 破坏 HTML 元 素 的 固有 语义 ， 让 阅读 者 一 
头 雾 水 。 同 样 的 情况 也 出 现在 table 等 元 素 上 。 


为 了 解决 这 个 问题 ， 从 Angular 1.2 开 始 ， 引 入 了 一 个 新 的 特性 : 可 以 使 用 ng-if-start/ng-if-end 或 ng-repeat-start/ng-repeat-end 指 令 来 让 它 的 作用 范围 横 跨 多 个 平 级 元 素 ， 如 : 


<ul> 
<li ng-if-start="visible">1</1i> 
<1i1 ng-if-end>2</1i> 
<1i>3</1i> 

</ul> 


这 样 ， 当 visible 为 false 时 ， 前 两 个 | 元 素 都 不 会 泻 染 。 


ng-repeat 的 用 法 也 类 似 。 


不 过 ， 当 可 以 用 合理 的 语义 增加 一 个 包装 元 素 时 ， 尽 量 使 用 包装 元 素 。start/end 后 缀 属于 比较 生 售 的 用 法 ， 建 议 主要 用 来 解决 ul 或 table 这 种 不 得 不 用 的 情况 。 


5.13 ”阻止 事件 冒 泡 和 浏览 器 默认 行为 


在 Angular 中 文 社区 中 ， 经 常 有 人 问 到 : 如 何 阻止 ngClick 的 事件 冒 泡 。 在 日 常 开发 中 ， 经 常 有 这 样 的 需求 : 在 某 个 DOM 节 点 的 事件 处 理 函 数 中 ， 我 们 已 经 响应 了 事件 处 理 ， 不 再 希望 其 祖先 DOM 获 得 
件 通知 ; 有 时 还 有 人 希望 阻止 链接 元 素 被 点 击 时 的 默认 行为 。 该 怎么 做 呢 ? 


由 | 


Angular 已 经 对 一 些 ng 事件 指令 加 入 了 $event 人 参数， 如 ngClick、ngBlur、ngCopy、ngCut、ngDblclick 等 ， 我 们 可 以 通过 它 阻 止 冒 泡 或 者 浏览 器 默认 行为 。 


在 ngClick 在 官方 文档 对 $event 是 这 么 描述 的 : 


Expression to evaluate upon click. (Event object is available as $event) 


我 们 也 可 以 从 Angular 源 码 中 看 见 gevent 的 定义 (ngEventDirsjs) : 


Var ngEventDirectives = {}; 
forEach ( 
"click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste'.split(' '), 
function(name) { 
Var directiveName = directiveNormalize('ng-' + name); 
ngEventDirectives[directiveName] = ['$parse', function($parse) { 
return { 
compile: function ($element, attr) { 
Var fn = $parse (attr[directiveName]) 7 
return function(scope, element, attr) { 
element .on (lowercase (name) ，function (event) { 
scope.$apply (function() { 
fn(scope, { 


$event: event 


从 代码 中 可 以 得 到 如 下 信息 : 


Angular 中 支持 Sevent 的 事件 有 : click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste 


Angular 会 为 事件 处 理 函 数 传 入 了 一 个 名 叫 $gevent 的 变量 ， 它 就 是 代表 当前 事件 信息 的 event 对 象 。 如 果 在 Angular 之 前 引入 了 jQuery， 那 就 是 来 自 Query 的 event 对 象 ， 如 果 没 有 引入 jQuery， 那 就 是 
来 自 jQlite 的 event 对 象 


弄 懂 了 这 些 ， 阻 止 冒 泡 或 浏览 器 默认 行为 就 变 得 很 简单 了 。 


HTML: 


<body ng-controller="DemoController as demo"> 
<div ng-click="demo.click('parent', $event)"> 


一 些 可 以 点 击 的 文本 
<hr> 
<input type="checkbox" ng-model="demo.stopPropagation" /> 停止 传播 ? 
<hr> 
<button type="button" ng-click="demo.click('button', $event) "> 按钮 </button> 
</div> 
</body> 
JavaScript: 


angular.module ('com.ngnice.app') .controller ('DemoController', function() { 
var wm = this; 
vm.click = function (name, Sevent) { 

console.log (name + ' ----- called'); 

if (vm.stopPropagation) { 

$event .stopPropagation (); 

} 
] 7 
return vm; 


i: 


上 面 的 例子 是 针对 阻止 事件 冒 泡 的 案例 ， 我 们 同样 可 以 调用 $event 的 preventDefault 方 法 来 阻止 浏览 器 的 默认 行为 。 


5.14 ”动态 绑 定 HTML 


在 Web 前 端 开 发 中 ， 有 时 会 遇见 这 样 的 需求 : 将 一 些 来 自 后 端 或 动态 拼接 得 出 的 HTML 字 符 串 绑 定 到 页 面 上 。 特 别 是 在 内 容 管理 系统 (Content Management System，CMS) 中 ， 这 更 是 硬 需 求 。 


Angular 提 供 了 ngBindHtml 指 令 来 实现 动态 绑 定 HTML， 它 会 将 计算 出 来 的 表达 式 结果 用 innerHTML 绑 定 到 页 面 DOM。 但 问题 没 这 么 简单 。 在 Web 安 全 中 ，XSS (Cross-site scripting， 脚 本 注入 


击 ) 是 在 Web 应 用 程序 中 很 典型 的 安全 漏洞 。XSS 攻 击 指 的 是 通过 对 网 页 注入 可 执行 客户 端 代码 且 成 功 地 被 浏览 器 执行 ， 来 达到 攻击 的 目的 ， 形 成 了 一 次 有 效 XSS 攻 击 。 一 旦 攻击 成 功 ， 它 可 能 会 获取 到 


户 的 一 些 敏感 信息 、 改 变 用 户 的 体验 、 诱 骗 用 户 等 非法 行为 ， 有 时 XSS 攻 击 还 会 同 其 他 攻击 方式 一 起 实施 ， 比 如 SQL 注 入 攻击 服务 器 和 数据 库 、Click 动 持 、 相 对 链接 动 持 等 实施 钓鱼 ， 它 带 来 的 危害 是 巨大 
的 ， 也 是 Web 安 全 的 头号 大 敌 。 更 多 的 Web 安 全 问题 ， 请 参考 wiki (https://en.wikipedia.org/wiki/Cross-site_scripting) 。 


Angular 默 认 是 不 “信任 ”动态 添加 的 HTML 内 容 的 。 对 于 动态 添加 的 “可 信 HTML” 都 必须 通过 $sce.trustAsHtml 来 告诉 Angular “这 是 可 信 的 ”。 否 则 ，Angular 将 会 抛 出 gsce: unsafe 异 常 错误 。 


Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context. (错误 : [$sce:unsafe] 试 图 在 安全 的 上 下 文中 使 用 非 安全 的 值 。) 


利用 ngBindHtml 来 绑 定 简单 的 HTML 内 容 的 示例 如 下 : 


HTML: 


<div ng-controller="DemoController as demo"> 
<div ng-bind-html="demo.html"></div> 
</div> 


JavaScript: 


angular.module ('com.ngnice.app') .controller ('DemoController', function($sce) { 
var wm = this; 
Var html = '<p>hello <a href="https://angular.io/">Angular</a></p>"'; 
wm.html = $sce.trustAsHtml (html); 
return vm; 


Hs 


简单 的 静态 HTML 绑 定 利用 ngBindHtm| 就 可 以 解决 问题 了 。 但 复杂 的 HTML 就 没有 这 么 简单 了 。 所 谓 复杂 HTML 是 指 可 能 带 有 Angular 表 达 式 、 指 令 等 的 HTML 模 板 ， 对 于 它们 来 说 不 仅 希 望 绑 定 到 
DOM 显 示 ， 同 时 还 希望 得 到 Angular 强 大 的 双向 绑 定 。 在 ngBindHtml 中 它 并 不 会 和 $scope 关 联 双 向 绑 定 ， 如 果 在 HTML 中 存在 ngClick、ngHref、ngShow、ngHide 等 Angular 指 令 ， 它 们 并 不 会 被 
compile。 点 击 这 些 按钮 ， 也 不 会 产生 任何 响应 ， 绑 定 的 表达 式 也 不 会 更 新 。 例 如 将 上 次 的 链接 变 为 : ng-href="demo.link"， 链 接 并 不 会 被 自动 解析 ， 在 DOM 看 见 的 仍然 会 是 原样 的 HTML 字 符 串 。 


在 Angular 中 的 所 有 指令 要 生效 都 必须 经 历 compile 过 程 ， 在 compile 中 通过 pre-link 和 post-link 来 为 DOM 元 素 添加 “行为 ”， 这 样 它们 才能 工作 。 大 部 分 情况 下 compile 是 会 在 Angular 启 动 时 自动 
compile 的 。 但 是 对 于 动态 添加 的 HTML 模 板 ， 就 需要 手动 compile 了 。Angular 提 供 了 $compile 服 务 来 实现 这 一 功能 。 下 面 是 一 个 比较 通用 的 compile 例 子 : 


HTML: 


<body ng-controller="DemoController as demo"> 
<dy-compile html="{{demo.html}}"> 
</dy-compile> 
<button ng-click="demo.change () ;"> 改 变 </button> 
</body> 


JavaScript: 


angular.module ('com.ngnice.app') .directive('dyCompile', function ($compile) 
return { 
replace: true, 
restrict; 'EA', 
link: function(scope, elm, iAttrs) { 
Var DUMMY SCOPE = { 
$destroy: angular.noop 
ks 
root = elm, 
childScope, 
destroyChildScope = function() { 
(childScope || DUMMY SCOPE) .$destroy (); 
}; 
iAttrs.$observe('html', function(html) { 
if (html) { 
destroyChildScope () 7 
childScope = scope.Snew(false) 
var content = $compile (html) (childScope); 
root.replaceWith (Content) 7 
Foot = content; 


} 
scope.$on('$destroy', destroyChildScope); 
1D); 
} 
a 


angular.module ('com.ngnice.app') .controller ('DemoController', function() { 
var wm = this; 
wm.html = '<h2>hello : <a ng-href="{{demo.link}}">Angular</a></h2>'; 
wm.link = 'https://angular.io/'; 
var i = 0; 
wm.change = function() { 
wm.html = '<h3>change after : <a ng-href="{{demo.1link}}">' + (++i) + '</a></h3>'; 
}; 
1D); 


在 上 面 代码 中 创建 了 一 个 叫 dyCompile 的 指令 ， 它 会 监听 绑 定 属性 HTML 值 的 变化 ， 当 HTML 内 容 存在 的 时 候 ， 它 会 尝试 创建 一 个 子 scope， 然 后 利用 $compile 服 务 来 动态 链接 传 入 的 HTML 和 这 个 子 
scope， 在 最 后 还 会 用 它 来 替换 掉 当前 DOM 节 点 ; 创建 独立 子 scope 是 为 了 方便 在 每 次 销毁 DOM 的 同时 能 很 容易 地 把 scope 也 销毁 掉 ， 销 毁 掉 HTML compile 带 来 的 watchers 函 数 。 最 后 还 需要 在 父 scope 
被 销毁 的 时 候 ， 也 需要 自动 地 销毁 这 个 独立 的 子 scope。 


因为 有 了 上 边 的 compile 的 编译 和 链接 : ngHref 指 令 就 可 以 生效 了 ， 能 正确 地 实现 href 链 接 了 。 需 要 注意 的 是 ， 这 里 笔者 只 是 尝试 给 出 动态 compile Angular 模 板 的 示例 ， 请 根据 你 的 业务 来 声明 具体 
的 业务 指令 。 


第 6 章 Angular 常 见 的 “ 坑 ” 


在 工程 实践 中 ， 最 有 挫败 感 的 莫 过 于 “ 掉 坑 里 ”了 。 任 何 一 项 新 技术 都 会 有 坑 ， 也 就 是 反 直觉 的 地 方 。 这 些 地 方 使 人 不 小 心 就 容易 钻 进 牛角 尖 ， 然 后 就 得 花 大 量 时 间 有 候 出 来 。 


如 果 说 “最 佳 实践 ”和 “技巧 ”都 是 正面 教材 ， 那 么 “ 坑 ” 就 是 反面 教材 了 7。 和 “技巧 ”一 样 ， 如 果 你 有 精力 ， 就 通读 一 遍 ， 否 则 就 把 它 作为 工具 书 ， 开 发 中 遇 到 怀疑 是 “ 坑 ” 的 地 方 就 来 查 查 。 


6.1 module 函 数 的 声明 和 获取 重 载 


Module 是 Angular 中 重要 的 模块 组 织 方式 ， 它 具有 将 一 组 业务 组 件 (Controller、Service、Filter、Directivehttp://www.hzcourse.com/resource/readBook? 
path=/openresources/teach_ebook/uncompressed/15538/OEBPS/Text/…) 内 聚 地 封装 在 一 起 的 能 力 。 将 代码 按照 业务 领域 来 划分 模块 ， 然 后 在 它 的 消费 模块 中 加 入 对 它 的 依赖 。 这 样 能 更 好 地 “分 
离 关 注 点 ”， 实 现 “ 高 内 聚 低 看 合 ”。 “高 内 聚 低 耦 合 ” 源 于 结构 化 编程 。 内 聚 是 指 模块 或 者 对 象 内 部 的 完整 性 ， 一 组 紧密 联系 的 逻辑 应 该 封装 在 同一 代码 单元 (模块 、 对 象 等 ) ， 而 不 是 分 散在 各 处 ; 耦 
合 则 指 代码 单元 (模块 、 对 象 等 ) 之 间 的 依赖 程度 ， 如 果 一 个 模块 的 修改 会 引起 另 一 个 模块 的 随 之 修改 ， 则 说 明 这 两 个 模块 之 间 是 紧 耦 合 的 。 


同时 Module 也 是 Angular 的 代码 入 口 。 只 有 在 声明 了 Module 的 情况 下 ， 才 能 定义 Angular 组 件 ， 如 Controller、Service、Filter、Directive、Config 代 码 块 、Run 代 码 块 等 。 
Module 的 定义 为 : angularmodule (app'，[) 。module 函 数 可 以 接受 3 个 参数 ， 它 们 分 别 为 : 
:name: 模块 的 名 称 。 它 应 该 是 全 局 唯一 的 ， 同 时 也 是 必 选 的 参数 。 它 可 以 被 其 他 模块 所 依赖 ， 也 可 以 作为 ngApp 指 令 所 引用 的 主 模块 。 


“ requires: 模块 的 依赖 。 它 是 指 当前 模块 所 依赖 的 其 他 模块 。 特 别 注意 : 如 果 在 这 里 没有 声明 模块 的 依赖 ， 则 无 法 在 当前 模块 中 使 用 来 自 所 依赖 模块 的 任何 组 件 。requires 参 数 是 可 选 的 ， 如 果 没 有 传递 
requires 参 数 ， 则 为 获取 module; 反之 ， 则 为 创建 module。 


“ configFn: 模块 的 启动 配置 函数 。 该 函数 会 在 Angulat 的 config 阶 段 被 调用 ， 来 实现 对 Provider 的 全 局 配置 。 如 $routeProvidet 的 路 由 信息 配置 。 该 配置 函数 等 同 于 “module.config” 方 式 声明 配置 信息 。 笔 
者 更 建议 用 “module.config” 方 式 去 声明 ， 而 不 用 这 个 参数 。 配 置 函 数 参数 也 是 可 选 参 数 。 


对 于 angular.module 方 法 ， 有 两 种 “ 重 载 ”形式 ， 它 们 分 别 为 angularmodule ('app'，[ 可 选 依赖 ]) 和 angular.module ('app') 。 请 注意 ， 后 者 绝 不 是 angular.module ('app'，D[) 的 简写 ! 事实 
上 ， 它 们 具有 完全 不 同 的 含义 。 前 者 是 创建 新 module， 而 后 者 是 获取 现 有 module。 在 应 用 程序 中 ，module 的 创建 应 该 有 上 且 仅 有 一 次 ; module 的 获取 ， 则 可 以 有 多 次 。 


笔者 推荐 将 各 Angular 组 件 放 在 独立 的 文件 中 ; 用 一 个 单独 的 module 文 件 来 创建 module 和 声明 module 的 依赖 ， 其 他 文件 则 只 获取 module。 需 要 注意 的 是 ， 在 打包 或 script 引 入 时 ， 必 须 先 加 载 创建 
module 的 文件 ， 然 后 才能 加 载 其 他 注册 Angular 组 件 的 文件 。 在 FrontJet 中 ， 集 成 了 一 个 gulp-angular-filesort 插 件 ， 它 会 自动 完成 这 项 排序 工作 ， 如 果 使 用 自己 的 工具 链 ， 就 要 注意 验证 它 是 否 实现 了 类 
似 的 功能 。 


在 Angular 中 文 社区 群 ， 有 时 会 听 到 某 某 同学 问 关 于 “ng: areq” 错 误 的 问题 : 


[ng:areq] Argument 'DemoController' is not a function，got undefined! 


这 如 果 不 是 因为 忘记 了 定义 Controller， 那 就 很 可 能 是 多 次 创建 module 导 致 的 。 在 每 次 创建 module 时 ， 都 会 导致 之 前 创建 的 module 定 义 信息 被 清空 ， 已 定义 的 Angular 组 件 也 会 丢失 。 这 点 能 从 
Angular 源 码 中 了 解 到 (来 自 loader.js) : 


function setupModuleLoader (window) { 


http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/... 


function ensure (obj, name, factory) { 
return obj[name] || (obj [name] = factory()); 


} 


var angular = ensure (window，'angular'，0Object); // 开放 window.angular 的 对 外 接口 


return ensure (angular， 'module', function() { 
var modules = {}; 
return function module (name, requires, configFn) { 
Var assertNotHasOwnProperty = function(name, context) { 


if (name === 'hasOwnProperty') { // module 名 称 不 能 声明 为 hasOwnProperty 


throw ngMinErr('badname', 'hasOwnProperty is not a valid {0} name', context); 


} 
bad 


assertNotHasOwnProperty (name, 'module'); 


经 声 


if (requires && modules.hasOwnProperty (name)) { // 存在 requires 则 为 module 声 明 。modules.hasOwnProperty (name) 为 true， 则 说 明 已 经 声明 过 此 模块 


modules [name] = null; // 对 已 声明 module 清 空 处 理 
i 


return ensure (modules, name, function() { 


if (!requires) { // 在 使 用 前 ,必须 声明 module， 也 就 是 应 该 存在 requires 信 息 


throw $injectorMinErr('nomod', "Module '{0}' is not available! You either misspelled " + 
"the module name or forgot to load it. If registering a module ensure that you " 十 


"specify the dependencies as the second argument.", name); 


var invokeQueue = []; 
var runBlocks = []; 
var config = invokeLater('$injector', ‘'invoke'); 
Var moduleInstance = { // 各 组 件 API 声 明 
invokeQueue: invokeQueue, 
_runBlocks: runBlocks, 
requires: requires, 
name: name, 
Provider: invokeLater('$provide', 'provider'), 
factory: invokeLater('$provide', 'factory'), 
service: invokeLater('$provide', 'service'), 
value: invokeLater('S$provide', ‘'value'), 


constant: invokeLater('$provide', 'constant', "unshift')， 
animation: invokeLater('$animateProvider', 'register'), 
filter: invokeLater ('$filterProvider', 'register'), 
controller: invokeLater('$controllerProvider', 'register'), 
directive: invokeLater('$compileProvider', 'directive'), 


config: config, 
run: function (block) { 
runBlocks .push (block); 
return this; 
} 
a8 
if (configFn) { 
config (configFn); // 模块 配置 函数 缓存 


return moduleInstance; 
function invokeLater (provider, method, insertMethod) 
return function() { 


invokeQueue[insertMethod || 'push'] ([provider, method, arguments]); 
return moduleInstance; // 返回 模块 实例 ， 形 成 链 式 访问 (流畅 API) 


Ea 


首先 Angular 会 确保 全 局 的 window.angular API 的 可 用 ， 紧 接着 还 会 在 Angular 对 象 上 开放 module 这 个 APl。 如 果 名 称 是 “hasOwnProperty”， 那 么 会 引起 混淆 ， 所 以 Angular 会 提前 检查 并 抛 


出 “badname” 异 常 。 


在 module 函 数 证 


在 angularmodule 的 返回 值 modulelnstance 中 ， 公 开 了 Angular 组 件 的 声明 API。 它 们 分 别 是 : _invokeQueue、_runBlocks、requires、name、provider、factory、service、value、constant、 
animation、filter、controller、directive、config、run。 其 中 invokeQueue 和 _runBlocks 是 按 名 约定 的 私有 属性 ， 建 议 不 要 使 用 它们 。 其 余 的 API 都 是 Angular 中 常用 的 组 件 声明 API。 所 有 Angular 组 
件 的 定义 都 会 通过 invokeLater 函 数 代理 ， 并 且 它 的 返回 值 一 直 保 持 为 nodulelnstance 实 例 ， 这 便 形 成 了 DSL (特定 领域 语言 ) 中 的 流畅 APIl。 所 以 更 推荐 使 


它们 声明 在 一 个 全 局 的 module 变 量 上 。 


最 后 ， 如 果 传 入 了 第 三 个 参数 configFn 函 数 ， 则 它 将 被 配置 到 config 信 息 中 。 在 Angular 进 入 config 阶 段 时 ， 所 有 的 config 信 息 将 会 被 依次 执行 ， 实 现 对 应 


置 。 


6.2 ngModel 绑 定 值 不 更 改 


中 ， 如 果 有 requires 参 数 的 传递 ， 则 表示 为 module 的 创建 。 同 时 ， 如 果 已 经 存在 同名 的 module， 则 会 自动 清空 已 有 的 module 信 息 ， 将 : 


为 null。 


Angular 中 的 $scope 是 页 面 (View) 和 数据 (Model) 之 间 的 桥梁 ， 它 链接 了 页 面 元 素 和 Model， 也 是 Angular 双 向 绑 定 机 制 的 核心 。 


而 ngModel 是 Angular 用 来 处 理 表单 (form) 的 最 重要 的 指令 ， 它 链接 了 页 面 表单 中 的 可 交互 元 素 和 位 了 


上 ， 同 时 也 会 根据 用 户 在 form 表 单 的 输入 或 交互 来 更 新 此 Model 值 。 


F$scope 之 上 的 Model， 它 会 自动 把 ngModel 所 指向 的 Model 值 演 染 到 form 表 单 的 可 交互 元 素 


在 源码 中 ，Model 值 的 格式 化 、 解 析 、 验 证 都 是 由 ngModel 指 令 所 对 应 的 控制 器 ngModelController 来 实现 的 。 


笔者 经 常 被 问 到 一 个 问题 : “为 什么 我 的 ng-model= “xxx” 值 不 能 在 页 面 显示 了 呢 ?“ 


对 于 ngModel 的 这 类 问题 主要 分 为 两 类 : 


* Model 值 不 满足 表单 验证 条 件 ， 所 以 Angular 不 会 泻 染 它 。 


. 由 于 JavaScript 特 殊 的 原型 链 继承 机 制 ， 对 $scope 中 属性 的 赋值 并 不 能 更 新 到 父 Sscope。 


在 本 节 中 ， 我 们 将 会 详细 分 析 此 类 问题 ， 借 此 深入 剖析 ngModel 的 工作 原理 。 


6.3 ”指令 不 生效 


经 常 在 群 里 听 到 很 多 Angular 新 手 问 到 : “为 什么 xxx 指 令 不 生效 呢 ? …” 


对 于 这 类 问题 可 以 按照 以 下 步骤 来 一 一 排查 : 


链 式 方式 来 定义 这 些 Angular 组 件 ， 而 不 是 将 


程序 或 Angular 组 件 对 象 实例 的 特定 配 


“ 是 否 引入 了 依赖 库 的 JavaScript 文 件 。 无 论 是 通过 bower install、npm install 还 是 手动 下 载 方 式 来 引入 第 三 方 库 ， 都 需要 将 其 引入 到 Angular 的 首页 。 即 使 是 使 用 Gulp/Grunt 的 use-min 插 件 、Browserify、 
Webpack 等 工具 ， 都 需要 确保 加 载 了 依赖 库 的 JavaSctipt 文 件 。 

: 在 module 声 明 中 是 否 添加 了 对 依赖 模块 的 声明 。Angular 是 通过 注入 机 制 来 加 载 注册 指令 、 服 务 等 组 件 的 ， 所 以 必须 确保 添加 依赖 模块 的 声明 。 在 直接 依赖 的 module 中 引入 module 依 赖 是 一 种 最 佳 实 
践 。 虽 然 在 全 局 module 中 引入 也 能 工作 ， 但 这 并 不 利于 业务 模块 化 的 组 织 、 打 包 和 复 用 。module 的 详细 资料 ， 请 参考 6.1 节 module 函 数 的 声明 和 获取 重 载 ”。 


angular.module ('com.ngnice.app', [ 
'third.party.module' // 依赖 第 三 方 模块 名 
]) 7 


指令 在 HTML 中 的 书写 是 否 正确 。 由 于 HTML 是 忽略 大 小 写 的 ， 所 以 Angular 采 用 了 X-Tag 的 方式 来 命名 。 即 在 JavaScript 中 采用 首 字母 小 写 的 驼峰 命名 ， 在 HTML 中 却 是 以 “-” 分 割 的 全 小 写 方式 命 
名 。 

指令 “restrict” 的 定义 方式 。 如 果 定义 为 “E” 的 指令 ， 则 需要 以 Element 方 式 书写 ; 定义 为 “A” 的 指令 ， 则 需要 以 Attribute 方 式 书写 。 当 然 还 有 “C” 和 “M” 两 种 方式 ， 但 并 不 推荐 大 家 使 用 它 
们 。 


如 果 是 封装 的 jQuery 等 非 Angular 插 件 ， 需 要 确保 手动 的 $gapply 来 更 新 View。 关 于 这 点 请 参见 3.4 节 “ 脏 检查 机 制 ”。 


另外 ， 对 于 这 类 问题 ， 可 以 尝试 使 用 Angular-hint 项 目 来 辅助 快速 定位 ， 请 参见 4.13 节 “引入 Angular-hint”。 


6.4 _ Angular 中 锚 点 的 使 用 


在 Angular 路 由 中 有 两 种 实现 方式 ， 它 们 分 别 为 HTML5history 和 Hashbang。 当 然 对 于 HTML5history 并 不 是 所 有 的 浏览 器 都 支持 。 图 6-6 是 它们 之 间 对 于 URL 解 析 的 区 别 : 


HTML5 Mode 


Regular URL: http://foo0.com/bar?baz=23#baz 


a 


$location.path() 一 一 $location.search() 一 一 $location.hash!() 


和 


Hashbang URL: http://foo0.com/#!/bar?baz=23#baz 


Hashbang Mode 
(HTMLS Fallback Mode) 


图 6-6 HTML5history 和 Hashbang 的 区 别 


它们 之 间 的 使 用 方式 还 有 很 多 不 同 ， 更 多 信息 请 参见 ngnice 文 档 : http://docs.ngnice.com/guide/$location。 


本 节 的 主要 内 容 是 : 如 果 URL 的 锚 点 被 Hashbang 占 用 了 ， 那 么 如 何 继续 实现 URL 锚 点 导航 定位 呢 ? 


Angular 团 队 已 经 提前 考虑 到 了 这 个 问题 ， 提 供 了 “$anchorscroll” 服 务 来 处 理 URL 锚 点 的 定位 。 如 下 面 来 自 Angular 官 方 的 示例 : 


HTML: 


<div id="scrollArea" ng-controller="ScrollCtrl"> 
<a ng-click="gotoBottom()">Go to bottom</a> 
<a id="bottom"></a> You're at the bottom! 
</div> 


JavaScript: 


angular.module ('com.ngnice.app') .controller ('DemoController', function($location, $anchorScroll) { 
var wm = this; 
wm.gotoBottom = function() { 
// location.hash 参 数 为 : 导航 目标 节点 的 id。 
$location.hash ('bottom'); 
// 确保 调用 $anchorScroll () 
SanchorScrol1l (); 
}; 
return vm; 


DD); 


这 样 URL 锚 点 定位 的 问题 ， 就 迎刃而解 了 。 


6.5 ngRepeat 验 证 失效 


如 果 Form 表 单 控件 是 利用 ngRepeat 指 令 动态 生成 的 ， 那 么 你 会 遇见 无 法 处 理 表单 验证 的 诡异 问题 。 一 旦 控件 是 由 ngRepeat 动 态 生成 的 ， 那 么 就 无 法 在 From 对 象 上 引用 该 表单 控件 。 如 下 面 代码 所 


了 


<div ng-form="" name="demoForm"> 
<div ng-repea em in [1, 2, 3]" 
No {{item}}: 
<input type="number" ng-model="demo.data[l$index]" name="amount" min="10" /> 
<div ng-show="demoForm.amount. $error.min"> 
Should more than 10。 
</div> 
</div> 
</div> 


在 这 里 期 望 的 是 : 当 输 入 小 于 10 的 数字 时 ， 应 该 显示 错误 验证 信息 “Should more than 10。”。 但 是 在 这 里 ， 它 始终 无 法 生效 。 这 是 因为 在 ngRepeat 中 产生 的 控件 ， 并 不 会 把 ngModelController 
注册 到 ngFormController 中 ， 因 此 错误 验证 信息 无 法 生效 。 


对 于 这 类 问题 有 两 种 解决 方案 : 简单 的 验证 和 复杂 的 验证 。 


6.6 ”有 些 指令 需要 唯一 的 根 节点 


在 书写 Angular 指 令 的 时 候 ， 也 许 你 也 遇 到 过 下 面 的 错误 异常 信息 : 


Error: [$compile:tplrt] Invalid Template Root:Template for directive '{0}' must have exactly one root element. {1} (错误 : [$compile:tplrt] 不 合法 的 模板 根 元 素 : 指令 '{0}" 的 模板 必须 


简单 地 说 ， 大 多 数 情 况 是 因为 在 Angular 的 指令 中 声明 了 “replace: true”， 并 有 赋予 的 template 或 者 templateUrl 对 应 的 HTML 并 不 包含 一 个 唯一 的 根 DOM 元 素 。 对 于 replace 为 true 的 指 
令 ，Angular 会 用 指令 的 内 容 来 蔡 换 掉 声明 处 的 DOM 节 点 。 但 是 由 于 不 存在 一 个 根 DOM， 导 致 Angular 无 法 替换 掉 原 有 的 DOM， 所 以 抛 出 了 上 面 的 异常 错误 。 


对 于 这 个 问题 ， 最 直接 的 解决 方式 当然 是 为 指令 的 HTML 模 板 加 上 一 个 根 节点 。 更 多 的 信息 ， 可 以 参考 ngnice 文 档 : http://docs.ngnice.com/error/$compile/tplrt。 


6.7 ”指令 优先 级 -Priority 


在 设计 Angular 指 令 的 时 候 ， 如 果 在 同一 个 DOM 元 素 上 标注 了 多 个 Angular 指 令 ， 有 时 需要 特殊 考虑 这 堆 指 令 的 执行 顺序 ， 不 同 的 执行 顺序 可 能 会 导致 不 同 的 结果 


比如 在 Angular 内 部 指令 中 的 ngRepeat 和 nglf 指 令 。 在 实际 开发 中 ， 经 常会 将 它们 两 个 混用 在 一 起 。ngRepeat 是 为 了 cloneNode 产 生 多 条 相似 的 列表 记录 。 而 nglf 则 是 按照 特定 的 状态 值 来 控制 单条 
记录 的 显示 隐藏 假设: Angular 在 解析 指令 的 时 候 ， 先 解析 了 nglf， 那 么 可 能 当前 标记 的 DOM 就 会 移 除 ， 因 此 ngRepeat 也 就 无 法 产生 多 条 记录 列表 了 。 显 然 这 不 是 我 们 所 期 望 的 效果 。 


因此 Angular 为 指令 专门 设计 了 一 个 叫 作 优 先 级 (priority) 的 属性 。ngRepeat 的 priority 值 为 1000， 而 nglf 的 priority 为 600。Angular 会 按照 优先 级 来 倒序 执行 它们 。 这 样 我 们 就 能 很 好 地 控制 期 望 的 
指令 执行 顺序 了 。 在 默认 情况 下 ， 指 令 的 优先 级 为 0。 我 们 也 可 以 设置 “terminal” 来 设置 当前 指令 的 权重 为 结束 界限 。 如 果 将 其 设置 为 true， 则 意味 着 节点 中 优先 级 小 于 当前 指令 的 其 他 指令 都 不 会 被 执 
行 ， 相 同 优先 级 的 指令 不 包含 在 内 。 


下 面 是 Angular 中 常用 指令 的 优先 级 速 查 表 : 


表 6-1 常用 指令 的 优先 级 


指 令 优 先 级 
ngRepeat 400 
ngSwitchWhen 400 


6.8 ngRepeat 报 重复 内 容错 误 


Angular 中 的 ngRepeat 是 作为 循环 迭代 的 指令 ， 也 是 日 常 开发 中 使 用 频繁 的 指令 之 一 。 对 它 不 是 很 了 解 的 Angular 新 手 经 常会 被 如 下 的 错误 所 


BH 


司 : 


Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in demo.items, Duplicate key: number:1 (错误 : 


按照 “程序 猿 ”的 思维 ,首先 尝试 重 现 这 个 错误 : 


HTML: 


<body ng-controller="DemoController as demo"> 
<div ng-repeat="item in demo.items "> 
{{item}} 
</div> 
</body> 


JavaScript: 


angular.module ('com.ngnice.app') .controller ('DemoController', function() { 
var wm = this; 

[1, 27 3, lr 11s 

return vm; 


重 现 了 问题 ， 紧 接着 就 是 尝试 修复 问题 。 


因为 ngRepeat 会 选择 一 个 key 值 来 关联 每 一 个 item 对 象 ， 并 且 要 求 这 个 key 是 唯一 的 。 不 幸 的 是 ， 这 里 使 用 的 基础 类 型 数组 中 的 “1” 


hu 
Man 


复 了 。 怎 么 解决 这 个 问 


Angular 中 的 ngRepeat 指 令 还 提供 了 自 定义 这 个 key 值 的 能 力 ， 那 就 是 “track by[key]”， 在 本 例 中 $index 是 唯一 的 ， 可 以 
以 从 这 里 了 解 更 多 信息 : http://docs.ngnice.com/api/ng/directive/ngRepeat。 


来 作为 key 值 。 对 于 Object 对 象 ， 也 可 以 采用 它 的 ID 标识 等 作为 key 值 。 可 


使 用 如 下 方式 则 可 以 修复 问题 了 : 


<body ng-controller="DemoController as demo"> 
<div ng-repeat="item in demo.items track by $index"> 
{{item}} 
</div> 
</body> 


不 错 ， 它 终于 工作 了 。 


6.9 ”单元 测试 中 promise 不 触发 


Angular 是 一 个 以 测试 为 中 心 的 前 端 框 架 。 单 元 测试 的 重要 性 不 言 而 喻 。 笔 者 更 喜欢 用 “ 敲 钉子 ”的 隐喻 来 解释 TDD: 
是 东西 上 已 经 有 一 个 很 深 的 洞 了 。 所 以 ， 好 的 方式 是 敲 一 禹 ， 检 查 一 下 ， 随 时 纠正 方向 ， 以 确保 前 进 的 大 方向 是 正确 的 。“ 


“比如 你 敲 钉 子 ， 如 果 一 口气 敲 完 了 才 发 现 ， 敲 帮 了 ， 那 就 得 拔 出 来 重新 来 ， 可 


TDD 更 重要 的 作用 是 引导 我 们 快速 验证 ， 尽 时 反馈， 价值 的 稳定 晋 加 ， 增 加 对 代码 的 信心 ， 以 及 教会 我 们 结果 导向 的 思维 。 笔 者 个 人 总 结 如 下 : “TDD 重 要 的 不 是 测试 代码 本 身 ， 而 是 解决 问题 的 思 
维 ， 也 许可 以 泛 化 ， 哪 怕 没 测试 ， 如 果 能 够 做 到 快速 验证 ， 及 早 反馈 ， 价 值 的 稳定 到 加 ， 有 足够 信心 ， 也 未 尝 不 可 。 履 盖 功 能 、 快 速 定位 Bug 等 ， 这 些 大 部 分 都 是 TDD 的 结果 导致 的 好 处 所 在 ， 而 价值 反馈 


思维 才 是 实现 TDD 背 后 的 原理 。”TDD 驱 使 我 们 以 结果 为 导向 ， 使 得 我 们 简单 设计 (并 不 是 无 设计 ) ， 日 常 重 构 我 们 的 代码 库 ， 注 重 交付 价值 流 的 稳定 去 加 。 


回 到 本 节 的 主题 ， 作 为 读者 的 你 是 否 也 在 单元 测试 中 遇见 过 下 面 的 问题 : 对 于 $q.when ([data]) 等 Promise 的 测试 ， 在 测试 中 它们 总 是 不 被 触发 。 


关于 这 点 我 们 可 以 从 Angular 的 $q 的 源码 中 找到 原因 : 


function $QProvider() { 

this.$get = ['$rootScope', '$exceptionHandler', function($rootScope, $exception-Handler) { 

return gqgFactory (function(callback) { 
$rootScope.$evalAsync (callback); 
}, $exceptionHandler); 
11; 
i 
function qFactory (nextTick, exceptionHandler) { 

Var defer = function() { 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/... 
deferred = { 

resolve: function(val) { 
if (pending) { 
var callbacks = pending; 
pending = undefined; 
value = ref (val); 
if (callbacks.length) { 
nextTick (function() { 
var callback; 
for (var i = 0, ii = callbacks.length; i < ii; i++) { 
callback = callbacks[i]; 
value.then(callback[0], callback[1], callback[2]); 
Es 


} 
} 


’ 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/... 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/... 


http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/... 
} 


从 上 面 的 代码 中 ， 可 以 看 出 $q 将 回调 函数 的 执行 放 到 了 nextTick 中 去 执行 。 所 谓 nextTick 就 是 下 一 次 “ 脏 检查 机 制 ”$digest 的 启动 。Angular 利 


行 。 关 于 $rootScope.$evalAsync 将 会 延迟 到 下 一 次 $digest 执 行 ， 可 以 从 3.4 节 “ 脏 检 查 机 制 ” 了 解 更 多 关于 它 的 知识 。 


'$rootScope.$evalAsync” 来 实现 延迟 回调 的 执 


解 完 引起 问题 的 溯源 之 后 ， 解 决 这 个 问题 就 变 得 很 容易 了 : 加 上 一 句 $scope.$digest () 来 保证 Angular 的 “ 脏 检查 机 制 ”被 触发 。 


第 7 章 ”编码 规范 


《计算 机 程序 设计 艺术 》 的 作者 Donald Knuth 曾 经 说 过 : “程序 是 写 给 人 读 的 ， 只 是 偶尔 让 计算 机 执行 一 下 。” 


试想 你 的 团队 成 员 ， 因 为 来 自 不 同 的 公司 或 者 有 不 同 的 语言 背景 ， 每 个 人 都 有 一 套 
在 心里 默默 地 “ 骂 娘 ” ， 要 不 就 在 每 次 添加 你 的 新 功能 前 总 是 会 将 文件 变 为 你 
多 少 人 共同 参与 同一 项 目 ,一 定 要 确保 每 一 行 代 码 都 像 是 同一 个 人 编写 的 。” 


自己 的 个 人 编码 嗜好 (编码 风格 ) ， 而 你 每 天 的 工作 都 需要 在 多 个 文件 中 穿梭 ， 我 相信 要 不 你 能 压抑 住 自己 情绪 ,但 
自己 的 编码 嗜好 (至 少 笔 者 是 这 样 的 ) 。 软 件 工程 化 中 有 句 “ 黄 金 定律 。: 


“一 个 项 目 应 该 永远 遵循 同一 套 编码 规范 ! 不 管 有 


在 团队 中 坚持 保持 同一 种 编码 规范 是 极其 重要 的 。 原 因 有 如 下 几 点 : 


“ 每 一 个 开发 者 都 不 用 去 调查 某 个 文件 的 作者 是 谁 ， 也 不 需要 花费 额外 的 精力 去 理解 代码 远 辑 并 重新 变 为 自己 的 嗜好 。 每 个 人 都 能 在 同一 上 下 文 工 作 ， 这 将 会 大 幅度 节约 时 间 成 本 。 


“能够 很 容易 地 识别 出 代码 的 问题 并 发 现 错误 。 如 果 所 有 的 代码 看 起 来 都 很 像 ， 当 你 看 见 一 段 与 众 不 同 的 代码 时 ， 很 可 能 问题 就 产生 在 这 段 代码 之 中 。 


“ 同时 将 具体 技术 、 框 架 的 一 些 最 佳 实践 和 常见 的 “ 坑 ” 加 入 项 目的 编码 规范 中 ， 这 会 让 你 的 团队 成 员 节 省 很 多 “让 坑 ”的 时 间 ， 并 在 一 定 程度 上 降低 代码 中 潜在 的 Bug 率 。 如 : JavaScript 中 的 parseInt 函 
数 始终 保证 传递 第 二 个 参数 “10”， 将 会 减少 错误 转换 为 其 他 进 制 的 问题 。 


在 谈 到 编码 规范 的 时 候 ， 我 们 经 常会 提 到 这 两 个 术语 : “编程 风格 ”和 “编码 规范 ”。 编 程 风格 是 编码 规范 的 一 种 ， 用 来 规约 单个 文件 中 的 代码 规范 。 编 程 规范 还 包含 了 编程 的 最 佳 实践 、 文 件 和 目录 
的 规范 等 方面 。 在 这 里 我 们 将 会 提 到 的 是 “编码 规范 ”。 


本 章 列 出 的 这 些 是 笔者 在 Angular 项 目 中 所 用 的 规范 ， 你 可 以 直接 用 到 你 所 在 的 项 目 ， 也 可 以 做 一 些 筛选 和 改进 ， 让 它 更 适合 你 现 有 的 团队 。 


7.1 目录 结构 


目录 结构 对 于 一 个 项 目 是 非常 重要 的 ， 一 个 好 的 目录 结构 能 让 团队 成 员 快速 找到 他 们 需要 修改 的 文件 ， 帮 助 他 们 高 效 地 工作 并 协调 一 致 。 


Angular 项 目 中 主要 分 为 两 类 目录 结构 组 织 方式 : 类 型 优先 型 和 业务 优先 型 。 


7.2 ”模块 组 织 


7.2.1 命名 


Angular module 是 Angular 中 JavaScript 代 码 项 目 组 织 方式 ， 以 及 模块 之 间 的 依赖 方式 。 我 们 可 以 按照 功能 划分 将 Controller、Service、Filter、Directive 内 聚 在 一 起 ， 做 到 可 复 用 的 组 件 模块 。 它 提 
供 类 似 Java 包 (package) 的 功能 ， 虽 然 我 们 不 需要 像 Java 包 一 样 严 格 的 目录 结构 对 应 ， 但 是 仍然 建议 以 全 小 写 且 以 “.” 分 割 的 方式 保证 唯一 命名 。 


angular.module('com.ngnice.app', ['dependencyl', 'dependency2', http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/...]) 


7.3 ”控制 器 


7.3.1 命名 


Controller 提 供 了 对 $scope 的 初始 化 和 加 工 处 理 ， 我 们 并 不 需要 手动 实例 化 它 。Angular 会 根据 路 由 配置 或 者 ng-controller 配 置 ， 利 用 $controller 服 务 自 动 实例 化 它 。 建 议 以 首 字母 大 写 的 驼峰 命 
以 及 加 “Controller” 后 缀 的 方式 来 命名 。 当 然 你 也 可 以 使 用 “Ctrl|” 后 缀 ， 只 要 能 保证 项 目 组 统一 。 笔 者 也 在 Angular-hint 项 目 出 来 之 前 ， 一 直 坚 持 使 用 “Ctrl ”为 后 缀 。 但 为 了 更 好 地 迎合 Angular-hint 
项 目 ， 改 为 了 “Controller” 后 级。 


//DemoController 

angular.module ('com.ngnice.app') .controller ('DemoController', function() { 
var wm = this; 
return vm; 


Ds 


7.4 服务 


7.4.1 命 


服务 包括 Service、Factory、Value、Constant、Provider 等 ， 它 们 是 Angular 中 提供 复 用 逻辑 封装 的 组 件 。 在 需要 使 用 这 些 服务 的 地 方 ， 需 要 利用 根据 所 注入 服务 的 用 途 决定 其 命名 格式 : 如 果 是 作为 
实例 使 用 的 ， 那 么 建议 使 用 “ 首 字母 小 写 的 驼峰 命名 (小 驼峰 ) ”格式 ;如果 是 作为 类 使 用 的 ， 那 么 建议 使 用 “ 首 字母 大 写 的 驼峰 命名 (大 驼峰 ) ”格式 。 


// 当前 用 户 ， 作 为 实例 使 用 
angular.module ('com.ngnice.app') .service('currentUser', function (){ 
this.name = "abc'7 
http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/... 


Hs 

// 用 户 REST 资 源 ， 作 为 类 使 用 

angular.module ('com.ngnice.app') .service('Users',function ($resource) { 
return $resource('/api/users/:id', {id: '@id'}); 


对 于 每 一 个 Filter， 在 Angular 的 背后 都 会 将 其 转换 为 一 个 名 为 [filterName]Filter 的 服务 ， 本 质 上 是 一 个 服务 的 实例 对 象 ， 所 以 建议 以 “小 驼峰 ”格式 声明 自 定义 Filter。 如 


angular.module ('com.ngnice.app') .filter('fullName', function() { 
return function (input, param, http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/...) { 


//filter code 


7.6 指令 
7.6.1 命名 


由 于 HTML 不 区 分 大 小 写 ， 所 以 Angular 规 定 Directive 以 “驼峰 ”的 格式 声明 ， 它 将 会 被 转变 为 “-” 分 割 的 全 小 写 元 素 名 或 者 是 属性 名 ， 如: 指令 paymentInfo 将 转化 为 payment-info。 


对 于 可 复 用 指令 ， 建 议 命名 加 上 一 个 短小 、 唯 一 、 具 有 描述 性 的 前 经， 例如 twTitle 指 令 就 用 了 tw 前 级， 表示 ThoughtWorks。 好 的 前 缀 能够 方便 快速 识别 Directive 的 内 容 和 起 源 ， 防 止 和 第 三 方 库 出 现 
命名 冲突 。 避 免 使 用 ng、ui、ion 为 前 级， 它们 已 经 被 使 用 在 第 三 方 开源 库 中 。 


7.7 模板 


7.7.1 表达 式 绑 定 


Angular 在 浏览 器 上 解析 表达 式 时 ， 可 能 出 现 闪 烁 问题 。 为 了 实现 更 好 的 用 户 体验 ， 推 荐 使 用 ng-bind 或 者 包 在 ng-cloak 指 令 中 的 Angular 表 达 式 来 防止 页 面 渲染 时 的 闪烁 。 详 情 参见 5.8 节 “防止 
Angular 表 达 式 闪烁 ”。 


78. :开具 


利用 JSHint 来 分 析 和 检查 JavaScript 代 码 ， 这 样 可 以 确保 团队 的 JavaScript 代 码 风 格 都 保持 一 致 ， 并 及 早 发 现 JavaScript 潜 在 的 Bug。 更 多 信息 参见 http://jshint.com/docs/。 下 面 是 一 段 可 选 的 JSHint 


"bitwise": true, 
"camelcase": true, 
"curly": true, 
"eqeqeq": true, 
"es3": false, 
forin"ns true, 
"freeze": true, 
"immed": true, 
"indent": 4, 
"latedef": "nofunc", 
"newcap": true, 

在 


"plusplus": false, 
"quotmark": "single", 
"undef": true, 
"unused": false, 
"strict": false, 
"maxparams": 10, 
"maxdepth": 5, 
"maxstatements": 40, 
"maxcomplexity": 8, 
"maxlen": 120, 
"asi": false, 
"boss": false, 
"debug": false, 
"eqnull": true, 
"esnext": false, 
"evil": false, 
"expr": false, 
"funcscope": false, 
"globalstrict": false, 
"iterator": false, 
"lastsemic": false, 
"laxbreak": false, 
"laxcomma": false, 
"loopfunc": true, 
"maxerr": false, 
"moz": false, 
"multistr": false, 
"notypeof": false, 
"proto": false, 
"scripturl": false, 
"shadow": false, 
"sub": true, 
"supernew": false, 
"val 


严格 模式 (Strict mode) 是 由 ECMA-262 规 范 定义 的 新 兴 JavasScript 标 准 ， 发 布 在 ECCMAsScript5 中 。 虽 在 改善 错误 检查 功能 并 标 出 可 能 不 会 被 未 来 的 JavaScript 标 准 兼 容 的 脚本 。ES5 严 格 模式 是 限制 
性 更 强 的 Javascript 变 体 ， 它 与 常规 JavaScript 的 语义 不 同 ， 其 分 析 更 为 严格 。 用 'use strict' 标 注 JavaScript 文 件 或 者 在 闭 包 内 部 启用 ES5 严 格 模式 ， 将 会 帮助 我 们 及 早 的 发 现 问题 和 修复 它 。 如 : 不 提前 使 有 
var 声 明 变量 ， 在 严格 模式 中 将 会 报错 ; 任何 使 用 'eval' 的 操作 也 会 被 禁止 ;with 作 用 的 使 用 也 是 被 禁止 的 。 


更 多 资料 可 以 参考 Mozilla 开 发 文档 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_ mode?redirectlocale=en- 


US&redirectslug=JavaScript%2FReference%2FFunctions and function scope%2FStrict mode。 


如 果 你 自己 的 代码 必须 在 构建 时 跟 第 三 方 库 文件 连接 成 一 个 文件 ， 那 么 合并 后 会 让 第 三 方 库 文件 也 受到 严格 检查 ， 而 这 可 能 导致 错误 。 这 时 ， 建 议 在 闭 包 内 启用 严格 模式 。 如 : 


(function (global, angular, undefined) { 

'use strict'; 

angular.module ('com.ngnice.app') 

http://www.hzcourse.com/resource/readBook?path=/openresources/teach ebook/uncompressed/15538/OEBPS/Text/... 
}) (this, angular); . 


79 其 他 


7.9.1 ”内 置 $ 服 务 蔡 代 原生 服务 


应 注意 以 下 几 点 : 
“$timeout 替 代 setTimeout 
“$Interval 替 代 setInterval 
. $window 普 代 window 


“ $document 替 代 document 


' $resource 或 $http 替 代 $.ajax 


angular.element 替 代 $ 


这 样 可 以 避免 手动 调用 $scope.$apply 启 动 “ 脏 检查 机 制 ”的 问题 、 获 得 更 多 的 AP1， 并 在 测试 中 更 好 地 进行 Mock。 


第 8 章 工具 


“ 工 欲 善 其 事 ， 必 先 利 其 器 ”。 工具 可 以 节省 大 量 的 时 间 ， 并 提高 代码 质量 。 在 本 章 中 ， 我 们 会 分 享 一 些 在 实际 开发 中 常用 的 工具 ， 这 些 工具 可 能 是 你 日 常 接触 但 是 了 解 不 够 深入 的 ， 也 可 能 是 你 
第 一 次 听 说 的 。 我 们 将 把 一 些 经 验 分 享 给 你 。 


限于 篇 幅 ， 我 们 无 法 讲 得 很 深入 ， 但 是 希望 能 给 你 一 些 启发 ， 自 己 去 寻找 更 趁 手 的 工具 ， 去 探索 日 常 使 用 工具 的 高 级 用 法 。 必 要 时 ， 还 可 以 自己 写 一些 能 帮 你 更 好 地 完成 任务 的 小 工具 。 


8.1 WebStorm 与 IntelliJ 


1DE 对 于 一 个 开发 者 来 说 ， 就 好 比 剑客 手中 的 剑 。1DE 用 着 顺 不 顺手 直接 影响 到 开发 者 的 心情 ， 并 最 终 影响 到 开发 进度 与 质量 。 如 果 某 一 天 公司 因为 停电 ， 你 的 上 级 对 你 说 : “今天 大 家 先 在 纸 上 写 代码 
吧 ”， 你 一 定 以 为 这 是 个 笑话 。 


本 节 我 要 给 大 家 介绍 的 是 JetBrains 出 品 的 开发 工具 ， 比 如 : Intellij IDEA、WebStorm、RubyMine、AppCode、PyCharm 等 。 其 中 WebStorm 可 以 说 是 Intellij IDEA 的 精简 版 ， 主 要 关注 的 是 前 端 开 
相应 的 ,价格 也 会 便宜 很 多 。 


涉 


曾经 有 人 在 InfoQ 上 专门 发 表 了 一 篇 名 为 “我 们 为 何 放弃 Eclipse， 投 奔 Intellj IDEA” 的 文章 ， 主 要 从 索引 速度 、 语 言 支持 、 透 视图 、 调 试 器 、 服 务 支 持 几 方 面 说 明了 自己 选择 Intellj IDEA 的 原 


加 


Intellij IDEA 提 供 了 很 多 功能 ， 最 常用 的 是 重 构 (Refactor) 和 活动 模板 (Live Template) 。 


重 构 是 Intellij IDEA 的 看 家 本 领 ， 它 也 是 第 一 个 在 IDE 中 实现 了 Java 的 重 构 支持 的 。 不 过 在 JavaScript 方 面 ， 由 于 天 生 缺 乏 类 型 信息 ， 因 此 无 法 实现 完善 的 重 构 ， 比 如 变量 改名 ， 有 时候 会 不 小 心 改 了 第 
三 方 库 中 的 同名 变量 ， 在 JavaScript 中 要 慎 用 重 构 。 


活动 模板 是 非常 实用 的 功能 ， 它 可 以 在 模板 中 定义 变量 ， 并 且 可 以 使 用 表达 式 自动 计算 变量 。 比 如 ， 我 定义 了 一 个 ngc 模 板 ， 它 的 定义 方式 是 这 样 的 : 


controller('$ctrl$$name$Ctrl', function ($scope) { 
Var wm = $scope.vm = {}; 
SENDS$ 

Ds 


其 中 ，$xxx$ 表 达 式 表示 一 个 模板 变量 ， 它 的 值 可 以 留 空 也 可 以 指定 表达 式 。 比 如 我 在 这 个 模板 的 变量 配置 中 就 把 $name$ 的 值 定义 为 capitalize (fileNameWithoutExtension () ) ， 这 样 它 就 先 取 到 
当前 的 文件 名 ， 然 后 去 掉 扩 展 名 ， 再 把 首 字母 大 写 ， 最 后 作为 $4name$ 的 默认 值 填充 到 模板 中 。 


活动 模板 还 支持 很 多 种 不 同 的 表达 式 ， 可 以 定制 出 功能 强大 的 模板 代码 ， 善 用 活动 模板 ， 可 以 显著 减少 重复 劳动 ， 提 高 编码 效率 。 


Intellij IDEA 有 着 丰富 多 彩 的 插件 ， 值 得 一 提 的 插件 有 以 下 几 个 。 


1.AngularJS 


它 提 供 的 主要 功能 就 是 代码 的 跳 转 、 智 能 感应 、 自 动 补 全 和 一 组 Live Template 模 板 。 比 如 : 


“ 可 以 从 视图 的 指令 中 按 Cttl-B 或 Cmd-B 跳 转 到 指令 的 源码 。 


“ 可 以 从 视图 的 绑 定 表达 式 ， 跳 转 到 相应 的 控制 器 代码 。 


“可 以 从 代码 中 的 templateUd 字 段 ， 跳 转 到 相应 的 视图 。 


“ 当 输 入 自 定义 指令 的 时 候 ， 它 会 给 你 提示 当前 应 用 中 可 用 的 指令 列表 。 
“ 当 输 入 错误 指令 的 时 候 ， 它 会 给 你 用 黄色 标记 出 来 。 
2.lonic Framework 


lonic 是 基于 AngularJS 的 前 端 框架 ， 主 要 解决 手机 端 开发 的 问题 。 这 个 插件 提供 了 对 lonic 指 令 、 服 务 等 的 支持 。 


3.Emmet 


以 前 叫 作 Zen Coding， 现 在 换 了 名 字 叫 Emmet， 熟 悉 了 它 的 一 些 规则 之 后 ， 能 够 提升 编写 HTML、(CSS 的 速度 数 倍 。 下 面 简单 地 举 几 个 例子 。 


输入 div.foo#bar， 再 按 Tab， 就 能 生成 如 下 代码 : 


<div class="foo" id="bar"></div> 


输入 ul>li#item$*3， 再 按 Tab， 就 能 生成 如 下 代码 : 


<ul> 
<11 id="iteml"></1i> 
<1i i tem2"></1i> 
<11 id="item3"></1i> 
</ul> 


输入 div.row>div.col-md-2*2+div.col-md-4， 再 按 Tab， 就 能 生成 如 下 代码 : 


<div class="row"> 
<div class="col-md-2"></div> 
<div class="col-md-2"></div> 
<div class="col-md-4"></div> 
</div> 


在 编写 CSS 的 时 候 有 时 需要 加 上 不 同 浏览 器 厂商 的 前 缀 ， 输 入 -transfrom， 再 按 下 Tab， 就 能 生成 如 下 CSS 代 码 : 


-webkit-transform: ; 
-moz-transform: ; 
-ms-transform: 7 
-or-transform: ; 
transform: 7 


8.2 Chrome 


成 为 了 Web 开 发 者 必 备 的 工具 。 你 可 能 已 经 熟悉 了 它 的 部 分 功能 ， 如 使 用 


在 Web 开 发 者 中 ，Google 的 Chrome 是 使 用 最 广泛 的 浏览 器 。 六 周一 次 的 发 布 周期 和 一 套 强大 的 不 断 扩大 的 开发 功能 ， 使 
console 和 debugger 在 线 编辑 CSS。 在 这 里 ， 我 们 将 介绍 几 个 有 助 于 改进 开发 流程 的 技巧 。 


1. 快 速 切换 文件 


如 果 你 使 用 过 Sublime Text， 那 么 你 可 能 不 习惯 没有 Go to anything 这 个 功能 。 你 会 很 高 兴 听 到 Chrome 开 发 者 功能 也 有 这 个 功能 ， 当 DevTools 被 打开 的 时 候 ， 按 Ctrl+P (Cmd+P) ， 就 能 快速 搜寻 
和 打开 你 项 目的 文件 。Chrome 的 界面 如 图 8-1 所 示 。 


Qa 日 Elements Network lSources| Timeline Profiles Resources_Audi5_cConsple_EdgThiscookie 


Sources | Content seri,, Snippets |[[3 ingex 
© no domain | 

© dbepggeogbaibhgnhhndojpep 

) localhost-8000 vw Call Stack 
browser-sync 
inGex html 

v Scope 

lang,css 


main.css 
v Breakpoints 


> DOM Breakpoints 
> XHR Breakpoints 


图 8-1 Chrome 的 界面 


2. 在 源 代码 中 搜索 


如 果 你 希望 在 源 代码 中 搜索 要 怎么 办 呢 ? 在 页 面 已 经 加 载 的 文件 中 搜寻 一 个 特定 的 字符 串 ， 快 捷 键 是 Ctrl+Shift+F (Cmd+Opt+F) ， 如 图 8-2 所 示 ， 这 种 搜寻 方式 还 支持 正则 表达 式 ! 


Network Sources Timeline Profiles Resources Audits Console EdRThisCookie 


pescript type="text/javascript” 10=" bs Script ”></Script> 

<Script async src="/browser-Sync/dr owser-Sync-client. 1.9.2.18"></5cript> 
pediv class™"index">.</div> 
bb <hy>_</hi> 


Find 四 Styles 


Regular expression 


TY localhost:$000/index html (5 matches) 
</span> |<spon classe"hljs-string"> </spon>|<span Classe"hljs-string">-— 1H0gés (WE 片 ) 
<p><code>ingSrcSanitizationWhitelist()</code> 的 默认 镇 于 <code>/~"se( (https?71ftpifile): Gora: IH098\/)/</code>， 也 轩 归 识 ， 使 用 http/https/ftp/f1le/dato: N96 开头 的 天 片 地 引 (<code>51t; img Srcn ,</code>) 不 会 被 过 池 掉 ，</p> 
<ing Src="./60, I 上 /ChroneSources.png” alt=™ he 
<p><ing sre""./60. IA/Postnontayout. pny” alte” “></p> 

W650 <pr<ing src"”./60.IR/PostnonCollection. png” te i /p> 


图 8-2 ”搜索 功能 


3. 通 过 Workspaces 来 编辑 本 地 文件 


Workspaces 是 Chrome DevTools 的 一 个 强大 功能 ， 这 使 DevTools 变 成 了 一 个 真正 的 IDE。Workspaces 会 将 Sources 选 项 卡 中 的 文件 和 本 地 项 目 中 的 文件 进行 匹配 ， 所 以 你 可 以 直接 编辑 和 保存 ， 而 不 
必 复 制 /粘贴 外 部 改变 的 文件 到 编辑 器 。 


为 了 配置 Workspaces， 只 需 打 开 Sources 选 项 ， 然 后 右 击 左边 面板 的 任何 一 个 地 方 ， 选 择 Add Folder To Workspace， 或 者 只 是 把 你 的 整个 工程 文件 夹 拖 放 入 Developer Tool。 现 在 ,无 论 在 哪 一 个 
文件 夹 ， 被 选中 的 文件 夹 ， 包 括 其 子 目录 和 所 有 文件 都 可 以 被 编辑 。 为 了 让 Workspaces 更 高 效 ， 你 可 以 将 页 面 中 用 到 的 文件 映射 到 相应 的 文件 夹 ， 允 许 在 线 编辑 和 简单 的 保存 。 


4. 选 择 下 一 个 匹配 项 


当 在 Sources 标 签 下 编辑 文件 时 ， 按 下 Ctrl+D (Cmd+D) ， 当 前 选中 的 单词 的 下 一 个 匹配 也 会 被 选中 ， 有 利于 你 同时 对 它们 进行 编辑 ， 如 图 8-3 所 示 。 


NY OY Nw yr 
gelay = Math.min(delay, this.recomectionDelaymax()); 
debog("will valit Wns Le reconnect atteapt”, Gelay); coluan: <not avaitabtey 
this, reconnecting = true. 
Var tiner « setTlacoot functionl) {《 
if (Sot.skipAeconnect) 
return; 
debug{ "attenpt ing reconneet"); 
SU ,enitAll("reconnect_attenpt”, SU.attenpts); 
Sell.eaitAll("reconnecting", SEU.atteapts); 
if (got.skipAeconnect) 
return; 
SU ,open( function(err) { 
于 (err) { 
debuvg( "reconnect attenpt error”); 
Ut, reconnecting = false; 
Self. reconnect(); 
salt.enitAtl( "reconnect _error”, err.data) 
} else { 
Sebug( "reconnect success”); 
elf.onreconnect () 


] TT 


vw 
加 
六 


图 8-3 ”选择 功能 


5.Batarang 插 件 


在 创建 AngularJS 应 用 时 ， 一 个 很 棘手 的 问题 是 如 何在 浏览 器 的 控制 台中 访问 AngularJS 内 部 的 数据 或 方法 。 下 面 我 们 来 一 起 学 习 如 何 使 用 Batarang 揪 件 帮助 我 们 达到 该 目的 。 安 装 最 新 版 本 请 访问 
Google web store: https://chrome.google.com/webstore/detail/ighdmehidhipcmcojjgiloacoafjmpfk。 如 果 想 安装 历史 版 本 请 参考 其 GitHub 的 步骤 : https://github.com/angular/angularjs- 


batarang。 


6. 查 看 Model 


安装 完 AngularJS Batarang 揪 件 之 后 ， 打 开 Chrome 的 DevTools 面 板 ， 你 会 发 现 多 了 一 个 页 签 叫 作 “AngularJSs”。 需 要 勾 上 Enable 选 项 ， 这 时 候 刷 新 AngularJS 应 用 的 页 面 ， 在 Model 页 签 中 就 可 以 
看 到 Scope 的 树 状 视图 了 ， 点 击 其 中 某 一 级 的 Scope， 在 右 侧 就 可 以 看 到 具体 值 了 ， 如 图 8-4 所 示 。 


oslkamscooke oo- 总 Dox| 


Noon | Peermaree Dependence optom rep [ emo | 


Scopes Models for (00L) 


< Scope (901) 


col: 


图 8-4 模板 


7. 查 看 Performance 


在 该 页 签 中 ， 左 侧 也 是 一 个 树 状 的 Scope 视 图 ， 可 以 选择 只 监视 某 几 个 scope， 右 侧 是 监视 的 表达 式 所 花费 的 时 间 及 相应 的 比例 ， 如 图 8-5 所 示 。 
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Watch Tree 


{{row,entity,year |yearformat)) 
col.colIndex() 
col.colindex() 


Watch Expressions 


function (){return i.$viewport.scrollLeftt())} |20.0% 163.01ms 


n |19.4% 16097ms 


{row.entity, status}} 
row.entity | SurveyArchiveUrl 
col.colIndex() 


A 
col.colIndex() 


图 8 


5 Scope 视 图 


8. 查 看 AngularJS properties 


col.colIndex() 1998% |31.38ms 


{{row.entity.region |regionrilter})} 1371% 111.66ms 


在 Chrome 的 DevTools 中 ， 打 开 Elements 页 签 ， 选 中 某 一 级 Html 元 素 ， 在 右 侧 的 AngularJS Properties 一 栏 中 ， 可 以 看 到 当前 HTML 所 在 的 Scope 中 的 值 ， 如 图 8-6 所 示 。 
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vesection ids"page"> 
<Script srew"/ssets/syuryey, js“></script> 
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vediv class""tree"> 
<input class="search-box form-control ng-pristine ng-valid” ng-nodel="keyWord.country” placeholder="Search 
Country” types"text"> 
veul> 
= pgRepeat: countries in countryGroup 一 > 
1 ng-class™"{(closed:countryTree, isFolgedlcountries)}” 


relw"stylesheet”> 


"http://nics.wnicet.org/surveys', tolse)” 


ng-repeat™” countries in countryGroup” class™”ng 
bp <divy>-</diy> 
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«l= end ngRepeat: countries in countryGroup 一 > 
</vl> 
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9. 在 Chrome 中 查看 作用 域 
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Slast: true 
smigdle: folse 
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» i Other Bookmarks 
| 


0101)- 净 口 .* 


Angulars Properties 


熟悉 Query 的 朋友 都 知道 ， 一 般 我 们 需要 取 到 某 一 段 DOM 的 时 候 ， 会 使 用 : $ ("selector") 。 那 么 我 们 为 什么 要 依赖 于 jQuery 呢 ? 在 没有 jQuery 的 时 候 怎么 办 ? 实际 上 部 分 浏览 器 (包括 Chrome) 
已 经 给 我 们 提供 了 一 个 叫 作 document.querySelector () 的 方法 。 这 个 方法 对 于 不 是 特别 复杂 的 元 素 选 取 已 经 绰绰有余 了 ， 下 面 我 们 就 来 看 几 个 例子 吧 。 


这 一 段 代码 展示 了 如 何 获得 某 一 级 元 素 所 在 的 gcope 和 控制 器 : 


Var elem = document.querySelector ('selector')7 
Var scope = angular.element (elem) .scope () 7 
Var ctrl = angular.element (elem) .controller (); 


在 Chrome 中 ， 除 了 可 以 在 JavaScript 代 码 中 打 断 点 来 调试 之 外 ， 还 可 以 用 debugger 方 法 。 当 程序 运行 到 debugger 方 法 时 ， 就 会 断 住 。 例 如 : 


angular.module ('com.ngnice.app') .factory('userService', function($http) { 
Var service = { 
userId: null, 
getCurrentUser: function() { 
debugger; 


return service.userId; 
} 
} 
return service; 


Hs 


8.3 Gulp 


Gulp 是 一 个 前 端 常 用 的 构建 工具 ， 类 似 于 Java 程 序 员 常 用 的 Ant、Gradle, 或 C/C++ 程序 员 常 用 的 make。 在 前 端 领 域 ， 它 的 竞争 产品 是 Grunt， 不 过 两 者 的 设计 思想 不 同 ，Grunt 侧 重 配置 ， 而 Gulp 
侧重 流程 。 相 对 而 言 ，Gulp 更 加 灵活 ， 也 更 方便 编程 控制 。 所 以 ， 对 于 复杂 的 构建 流程 ， 用 Gulp 写 构建 脚本 也 更 加 容易 。 


让 Gulp 如 此 成 功 的 原因 ， 在 于 它 更 适合 程序 员 的 思维 。 


Gulp 不 但 是 一 个 工具 ， 也 是 一 个 库 ， 事 实 上 ，FrontJet 就 是 把 Gulp 当 做 库 来 写 的 一 个 NodeJS 程 序 。Gulp 本 质 上 是 一 个 任务 管理 库 ， 它 可 以 定义 一 系列 任务 ， 这 些 任务 之 间 可 以 定义 依赖 关系 ， 也 可 以 
定义 并 行 执行 。 这 些 ， 正 是 构建 工具 要 做 的 事情 。 


想象 一 个 构建 工具 ， 它 会 做 什么 ? 遍历 目录 、 读 取 文件 、 转 换 (如 编译 ) 、 写 入 新 文件 或 修改 旧 文件 。Gulp 通 过 任务 机 制 来 处 理 这 些 共 性 工作 ， 自 己 写 的 代码 所 需要 做 的 大 部 分 工作 就 是 对 文件 内 容 进 
行 处 理 ， 而 不 用 重复 造 轮子 。 


这 些 步骤 ， 不 仅仅 是 构建 代码 的 共性 ， 而 且 是 很 多 其 他 工作 的 共性 ， 比 如 本 书 的 编写 ， 就 是 我 们 多 人 合作 共同 创作 Markdown 文 件 ， 通 过 Git 进 行 协作 ， 然 后 由 一 个 Gulp 任 务 转换 成 一 个 HTML 文 件 ,在 
浏览 器 中 预览 。 我 们 还 实现 了 对 SCSS 的 编译 ， 这 样 我 们 的 书籍 在 编写 期 间 也 有 了 漂亮 的 样式 ， 甚 至 包括 了 自动 语法 高 亮 。 最 后 ， 我 们 用 Word 打 开 这 些 HTML 文 件 ， 另 存 成 Word 格 式 ， 交 给 编辑 做 后 期 加 
工 ， 并 最 终 出 版 。 


这 种 概念 ， 叫 作 “ 流 式 构建 ”， 也 就 是 把 Gulp 用 作 总 控 的 流水 线 ， 我 们 自己 只 要 编写 这 个 流水 线 上 完成 单个 工序 的 任务 就 可 以 了 。 这 些 任务 都 很 小 ， 可 以 单 步 验收 成 果 ， 因 此 编写 和 调试 都 很 容易 。 


除了 传统 构建 工具 的 功能 之 外 ，Gulp 还 有 一 个 重要 特性 就 是 watch， 也 就 是 监听 文件 变化 ， 只 要 被 监听 的 文件 变 了 ， 就 会 自动 触发 某 个 任务 。 这 个 功能 对 于 实现 “ 随 改 随 生 效 ， 所 见 即 所 得 ”的 前 端 开 
发 体验 是 非常 有 用 的 。 


想 让 Gulp 更 具 实 用 价值 ， 仅 仅 有 一 个 好 的 设计 思想 和 架构 是 不 够 的 ， 还 需要 繁荣 的 生态 圈 ， 这 一 点 表现 为 Gulp 众 多 的 插件 。 在 npm 上 ， 目 前 可 以 搜 到 6800 个 Gulp 播 件 ， 基 本 上 你 需要 的 具有 共性 的 
功能 ， 都 有 插件 已 经 实现 了 。 除 此 之 外 ， 你 还 可 以 通过 through2 等 库 ， 实 现 自己 的 Gulp 插 件 。 通 过 自 定义 插件 ， 可 以 有 效 地 优化 代码 结构 。 


在 FrontJet 中 ， 直 接 依赖 的 Gulp 揪 件 有 40 多 个 ， 实 现 的 功能 各 不 相同 ， 如 果 感 兴趣 可 以 阅读 FrontJet 的 代码 来 了 解 下 ， 也 欢迎 各 位 贡献 代码 到 FrontJet 中 ， 共 同 打造 趁 手 的 前 端 开发 工具 。 


8.4 Swagger 


8.4.1 前 后 端 分 离 


按照 现在 的 趋势 ， 前 后 端 分 离 几乎 已 经 是 业界 对 开发 和 部 署 方式 所 达成 的 一 种 共识 。 所 谓 的 前 后 端 分 离 ， 并 不 是 传统 行业 中 的 按 部 门 划分 ， 一 部 分 人 只 做 前 端 (HTML/CSS/JavaScript 等 ) ， 另 一 部 分 
人 只 做 后 端 (或 者 叫 服务 端 ) ， 因 为 这 种 方式 是 不 工作 的 : 比如 很 多 团队 采取 了 后 端的 模板 技术 (JSP、FreeMarker、ERB 等 ) ， 前 端的 开发 和 调试 需要 一 个 后 台 Web 容 器 的 支持 ， 从 而 无 法 将 前 后 端 开 发 
和 部 署 真正 分 离 。 


通常 ， 前 后 端 分 别 有 着 自己 的 开发 流程 、 构 建 工具 、 测 试 等 。 做 前 端的 谁 也 不 会 想 要 用 Maven 或 者 Gradle 作 为 构建 工具 ， 同 样 的 道理 ， 做 后 端的 谁 也 不 会 想 要 用 Grunt 或 者 Gulp 作 为 构建 工具 。 前 后 端 
仅仅 通过 接口 来 协作 ， 这 个 接口 可 能 是 JSON 格 式 的 RESTFuI 的 接口 ， 也 可 能 是 XML 的 ， 重 点 是 后 台 只 负责 数据 的 提供 和 计算 ， 而 完全 不 处 理 展现 。 而 前 端 则 负责 拿 到 数据 ， 组 织 数据 并 展现 的 工作 。 这 样 结 
构 清晰 ， 关 注 点 分 离 ， 前 后 端 会 变 得 相对 独立 并 松 耦 合 。 但 是 这 种 想法 依然 还 是 很 理想 化 ， 前 后 端 集成 往往 还 是 一 个 很 头痛 的 问题 。 比 如 在 最 后 需要 集成 的 时 候 ， 我 们 才 发 现 最 开始 商量 好 的 数据 结构 发 生 

变化 ， 而 且 这 种 变化 往往 是 在 所 难免 的 ， 这 样 就 会 增加 大 量 的 集成 时 间 。 


归根 结 底 ， 还 是 前 端 或 者 后 端 感知 到 变化 的 时 间 周 期 太 长 ， 不 能 “及 时 协商 ， 尽 早 解决 ”， 最 终 导致 集中 爆发 。 怎 么 解决 这 个 问题 呢 ? 我 们 需要 提前 协商 好 一 些 契 约 ， 并 将 这 些 契 约 作 为 可 以 被 测试 的 
中 间 产 品 ， 然 后 前 后 端 都 通过 自动 化 测试 来 检验 这 些 契 约 ， 一 旦 契约 发 生变 化 ， 测 试 就 会 失败 。 这 样 ， 每 个 失败 的 测试 都 会 驱动 双方 再 次 协商 ， 有 效 地 缩短 了 反馈 周期 ， 并 且 降 低 集成 风险 。 具 体 的 实践 方 
式 ， 请 参见 我 同事 的 一 篇 博文 ，“ 前 后 端 分 离 了 ， 然 后 呢 ? ”http://icodeit.org/2015/06/whats-next-after-separate-frontend-and-backend/。 


不 过 ， 仅 仅 靠 纪 律 是 不 够 的 ， 还 需要 通过 工具 的 辅助 来 提高 效率 。 下 面 ， 我 们 就 来 看 一 下 ， 一 个 API 设 计 工 Swagger， 将 如 何 帮 助 我 们 更 好 地 实现 “前 后 端 分 离 ”。 


8.5 TSD 


在 编写 前 端 lavaScript 代 码 时 ， 最 痛苦 的 莫 过 于 代码 的 智能 感知 (Intelli Sense) 。 


追 其 根源 ， 是 因为 JavaScript 是 一 门 弱 类 型 的 动态 语言 。 对 于 弱 类 型 的 动态 语言 来 说 ， 智 能 感知 就 是 |DE 工 具 的 一 个 “软肋 ”。Intellij 等 IDE 所 用 智能 感知 方式 ， 是 一 种 折 中 的 方式 : 全 文 搜索 ， 然 后 展 
示 出 已 经 使 用 过 的 对 象 成 员 。 这 种 方式 的 缺点 是 ， 其 智能 感知 的 能 力 并 不 精准 ， 经 常会 显示 出 很 多 无 关 的 代码 提示 。 


在 很 多 现代 化 开发 方式 中 ，IDE 的 强大 支持 和 模块 化 组 织 这 种 “工程 化 ”的 思想 是 我 们 应 对 大 规模 开发 的 方式 之 一 ， 这 也 已 经 被 业界 所 认同 。 所 以 在 最 近 两 年 ，JavaScript 的 世界 也 提出 了 大 规模 开发 的 
方案 ,其 中 有 Google 的 Dart 和 微软 的 TypeScript。 随 着 Angular2.0 放 弃 了 自家 的 Dart， 而 选择 了 TypeScript， 也 标志 着 TypeScript 的 日 渐 成 熟 。TypeScript 是 微软 总 架构 师 Anders Hejlsberg 设 计 的 新 语 
言 ， 他 是 软件 界 的 传奇 人 物 ， 是 Delphi 和 .NET 的 设计 者 。TypeScript 是 一 种 可 以 编译 成 传统 JavaScript 的 语言 ， 它 并 不 是 完全 的 创造 了 一 门 新 语言 ， 而 TypeScript 是 JavaScript 语 言 的 超 集 ， 它 最 大 的 特点 就 
是 引入 了 类 型 系统 。 并 在 编译 为 JlavaScript 文 件 后 ， 可 以 输出 “.ts” 的 类 型 元 数据 信息 ， 为 我 们 IDE 的 智能 感知 和 重 构 提供 了 重要 的 依据 。 


关于 TypeScript 的 更 多 知识 ， 在 这 里 笔者 就 不 再 叙述 过 多 ， 有 兴趣 的 读者 可 以 到 http://www.typescriptlang.org/ 学 习 。 本 节 要 讲 的 是 TypeScript 的 另 一 个 特性 : 它 编译 输出 的 元 数据 信息 文件 
(*.d.ts) ， 它 可 以 在 不 需要 修改 原 有 JavaScript 文 件 的 情况 下 ， 给 JavaScript 添 加 元 数据 类 型 信息 ， 而 这 些 类 型 信息 则 可 以 辅助 IDE， 给 出 有 智能 的 提示 信息 ， 以 及 重 构 的 依据 。 


在 TypeScript 的 开源 社区 ， 已 经 为 很 多 的 第 三 方 库 实现 了 这 类 模板 文件 ， 我 们 可 以 很 快 地 将 其 应 用 在 我 们 的 项 目 之 中 。 当 然 这 里 所 说 的 第 三 方 包含 我 们 常用 的 : Angular、jQuery、underscore、 


lodash、jasmine 等 。 


官方 同时 也 为 我 们 提供 了 一 个 方便 的 工具 一 一 TSD (TypeScript Definition manager for DefinitelyTyped) ， 
习 成 本 ， 


只 管 像 使 


NPM 一 样 使 用 它 。 


它 是 借鉴 NPM 包 管理 工具 的 思想 ， 实 现 了 一 个 类 似 的 包 管理 工具 ， 我 们 不 需要 任何 的 学 


这 里 是 TSD 主 页 : http://definitelytyped.org/tsd/， 你 可 以 在 这 里 深入 了 解 它 ， 或 者 查询 你 所 需要 的 模板 库 是 否 存 在 于 TSD 仓 库 。 


TSD 也 是 一 个 Nodejs 的 工具 ， 所 以 我 们 安装 它 非常 容易 


， 只 需要 在 命令 行 中 输入 (对 


于 有 些 Linux 用 户 需要 sudo) : 


npm install tsd -9 


安装 我 们 需要 的 模板 库 ， 也 很 简单 ， 如 jQuery 和 Angular 的 安装 : 


tsd install jquery angular --save 


这 样 TSD 就 会 帮助 我 们 下 载 jQuery 和 Angular 的 d.ts 文 件 ， 并 存放 在 当前 目录 的 typings 独 立 子 目录 下 ， 并 且 
方便 于 我 们 的 版 本 管理 ， 以 及 团队 之 间 的 共享 。 我 们 只 需要 共享 这 个 tsdjson 文 件 给 其 他 同事 ， 然 后 


它 会 将 我 们 需要 的 依赖 信息 保存 在 一 个 叫 tsdjson 的 文件 中 ， 如 NPM 的 packagejson 一 样 ， 


tsd install 


一 切 都 就 绪 了 。 


tsdjson 文 件 的 格式 如 下 : 


v Dtypings 
vv Dangularjs 
E: angular.d.ts 
v Djquery 


"version": 


"va" 


"repo”; 
'ref": 
'path" H 


"borisyankov/DefinitelyTyped", 


"master", 
"typings" 3 


"bundle": 


"typings/tsd.d.ts", 


[ss jquery.d.ts 
| 态 tsd.d.ts 


"installed": { 


Pp Dvendor 
目 .env 
目 .gitignore 
IM] README.md 


"commit": 


"commit": 
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同时 TSD 工 具 还 会 为 我 们 在 typing 目 录 下 生产 一 个 tsd.d.ts 文 件 ， 它 会 


"angularjs/angular.d.ts": { 
"7a3calf0b8a0960af9fc1838f3234cc9d6ce08645" 


"jquery/jquery.d.ts": { 
"7a3calf0b8a0960af9fc1838f3234cc9d6ce08645" 


为 我 们 引入 这 些 模板 文件 ， 使 得 IDE 能 够 识别 出 模板 文件 : 


/// <reference path="angularjs/angular.d.ts" /> 
/// <reference path="jquery/jquery.d.ts" /> 


图 8-10 是 我 们 在 Intel 册 中 得 到 的 智能 感知 图 。 


angular.module('com.ngbook.demo', []) 


animation ( [Object] object) 


config ( [Function] configFn) 


constant ( [Object] object) 
constant ( [string] name, [any] value) 
controller ( [0bject] object) 
controller ( [string] name, [any[]] inlineAnnotatedCons.. 


controller ([string] name, [Function] controllerConstr.. 
『 一 一 ri 1 
Press ^.to choose the selected (or first) suggestion and insert a dot afterwards >> Tn 


UL AS AS AS A fy jw / 2 
( ( | | 1 用 ( | | 
:" : \ 是 \ 


arara#inar{ Tcirinnal]l namo 
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目前 能 够 很 好 地 支持 TypeScript 这 一 特性 的 工 


有 : Inte 册 家族、 微软 自家 的 VS 工具 、Sublime。 有 了 TSD 这 一 工 


animation ( [string] name，[any[]] inlineAnnotatedFunct.. 
animation ( [string] name, [Function] animationFactory) 
config ( [any[]] inlineAnnotatedFunction) 


in inoeAnnNnNntiaioad NANnct+ 


IModule 
IModule 
IModule 
IModule 
IModule 
IModule 
IModule 
IModule 
IModule 
IModule 


TMAdinlo 


， 也 许 我 们 虽然 还 不 能 尝试 Typescript 的 特性 ， 但 我 们 仍然 可 以 利用 它 来 帮助 我 们 


开发 普通 的 JavaScript 应 用 。 


8.6 Postman 


Postman 曾 出 现在 ThoughtWorks 2015 年 第 二 季度 的 技术 雷达 中 ， 下 面 一 段 话 摘自 ThoughtWorks 发 布 的 技术 雷达 。 “Postman 是 一 个 在 Chrome 中 使 用 的 REST 客 户 端 插件 ， 通 过 Postman， 你 可 以 
创建 请 求 并 且 分 析 服 务 器 端 返回 的 信息 。 这 个 工具 在 开发 新 的 AP| 或 者 实现 对 于 已 有 API 的 客户 端 访 问 代码 时 非常 有 用 。Postman 支 持 OAuth1 和 OAuth2， 并 且 对 于 返回 的 JSON 和 XML 数 据 都 会 进行 排版 。 
通过 使 用 Postman， 你 可 以 查看 你 通过 Postman 之 前 发 起 过 的 请 求 ， 并 且 可 以 非常 友好 的 编辑 测试 数据 去 测试 API 在 不 同 请 求 下 的 返回 。 同 时 ， 虽 然 我 们 不 鼓励 录 屏 式 的 测试 方法 ， 但 是 Postman 提 供 了 一 
系列 的 拓展 允许 我 们 将 它 作为 跑 测试 的 工具 。” 


在 工程 实践 中 ， 还 有 很 多 杂项 知识 ， 这 些 知识 可 能 一 般 项 目 中 用 不 到 ， 但 一 旦 用 到 就 没 处 找 去 。 


本 章 就 来 谈 谈 这 些 。 当 然 ， 它 们 确实 很 “ 杂 ”， 你 也 可 以 把 本 章 当 做 工具 书 使 用 ， 需 要 的 时 候 再 来 查 。 


9.1 Angular 2.0 


Angular 的 下 一 个 版 本 是 Angular 2.0。 


和 其 他 框架 的 升级 不 同 ，1.x 到 2.x 的 升级 几乎 是 革命 性 的 。2.x 将 不 再 支持 IE11 以 下 的 所 有 浏览 器 ， 充 分 发 握 浏 览 器 的 一 切 最 新 特性 一 一 为 了 速度 。 


这 种 革命 性 的 版 本 并 不 是 用 来 代 蔡 1.x 的 ， 特 别 是 在 国内 ，IE11 以 下 的 版 本 仍 将 长 期 存在 的 情况 下 。 不 过 有 一 个 领域 不 用 担心 这 些 : 移动 开发 。 安 卓 和 苹果 的 浏览 器 对 新 特性 的 支持 都 比较 迅速 ， 而 IE， 
在 手机 端 几乎 没有 市 场 ， 我 们 也 不 再 需要 忍受 它 的 “折磨 ”了 。 


2.x 有 很 多 激动 人 心 的 特性 ， 不 过 最 重要 的 就 是 速度 的 提升 ， 现 在 的 Angular 为 了 兼容 老 旧 浏览 器 ， 而 不 得 不 采用 “ 脏 检查 ”的 方式 更 新 界面 ， 这 在 PC 上 不 成 问题 ， 在 中 低 端 手机 上 则 难免 让 人 担心 。 不 
过 ， 一 切 还 是 要 看 现实 中 的 测量 结果 。 套 用 一 句 果 壳 体 名 言 : “离开 “测量 '” 谈 性能。 ， 就 是 要 流 泥 。”。 不 同 的 项 目 ， 对 性 能 的 需求 也 不 一 样 ， 如 果 你 的 项 目 确实 遇 到 了 性 能 瓶颈 ， 等 2.x 推 出 时 , 它 将 
是 你 的 救星 。 


2.X 在 代码 结构 上 也 有 了 很 多 改进 ， 它 使 用 更 加 现代 的 语言 进行 开发 ， 如 ECMAScript6、TypeScript 等 。 这 些 语言 都 内 置 了 模块 化 支持 ， 于 是 为 了 模块 化 而 设计 的 Module， 及 其 相关 函数 也 不 需要 了 。 
Typescript 现 在 还 提供 了 Annotation 语 法 一 一 就 像 Java 中 一 样 ， 于 是 我 们 有 了 更 简单 明了 的 方式 来 声明 各 种 不 同 用 途 的 对 象 。 


Angular 2.0 目 前 处 在 Alpha 测 试 阶段 ， 并 且 已 经 通过 https://angulario 对 外 发 布 了 。 根 据 Angular 一 向 的 版 本 发 布 进度 来 估算 ， 可 能 明年 六 月 份 会 推出 正式 版 ， 也 可 能 更 晚 ， 而 等 到 生态 系统 完善 到 足 
够 用 于 大 型 项 目 ， 可 能 要 等 到 明年 底 了 ， 不 过 ， 也 可 能 我 低估 了 Angular 社 区 的 热情 。 所 以 ， 比 较 乐 观 的 期 待 是 明年 下 半年 可 用 于 中 小 型 项 目的 开发 。 


1.ECMAScript6 简 介 


Mm 
否 


ECMAScript 是 一 种 脚本 语言 的 标准 ， 现 代 浏 览 器 中 所 有 的 JavaScript 都 是 ECMAScript 标 准 版 的 一 种 实现 ， 甚 至 连 Flash 编 程 时 使 用 的 ActionScript 也 是 。 而 伴随 HTML5 而 来 的 ， 除 了 CSS3， 最 如 
就 是 ECMAScript6 (简称 ES6) 了 。 


不 过 ， 如 同 当初 的 浏览 器 大 战 一 样 ， 围 绕 ES6 标 准 化 的 博弈 更 加 激烈 ， 远 超 HTML5 和 CSS3， 各 个 浏览 器 厂商 都 希望 主导 这 个 标准 。 更 何况 ， 这 个 标准 要 解决 的 问题 确实 比较 复杂 ， 结 果 便 是 : ES6 标 准 
述 迟 不 能 出 炉 ， 直 到 今年 (2015 年 ) 6 月 才 最 终 发 布 。 


虽然 如 此 ， 目 前 还 没有 任何 浏览 器 或 服务 端 JavaScript 引 警 完整 的 实现 了 ES6， 即 使 最 新 的 浏览 器 也 是 如 此 。 不 过 对 部 分 新 语法 的 支持 不 需要 新 的 引擎， 它们 可 以 被 编译 成 ES5 等 浏览 器 已 经 支持 的 
Javascript 版 本 。 这 种 努力 ， 做 得 最 成 功 的 是 Traceur 和 Babel， 这 两 个 都 是 翻译 器 ， 虽 然 无 法 支持 全 部 语法 ， 不 过 对 于 尝鲜 来 说 ， 已 经 基本 够 用 了 。 


剩 下 的 ， 我 们 就 祈祷 这 些 厂 商 规 规矩 矩 的 实现 它 吧 ， 不 要 再 让 开发 者 成 为 浏览 器 大 战 的 牺牲 品 。 


2.TypeScript 简 介 


我 们 前 面 提 到 TypeScript， 它 是 微软 开发 的 一 种 语言 ， 向 后 兼容 JavaScript， 并 且 添 加 了 诸如 类 型 声明 等 现代 语法 特性 。 最 终 ， 它 会 被 编译 为 JavaScript 文 件 ， 以 便 兼 容 老式 浏览 器 。 


TypeScript 引 入 了 很 多 语法 ， 如 模块 、 类 、 接 口 、 混 入 类 (Mixin) 等 。 


这 里 还 有 一 个 小 故事 。 在 Angular 2.0 的 设计 之 初 ，TypesScript 缺 少 一 项 重要 的 语法 支持 ， 那 就 是 Annotation， 于 是 Angular 开 发 组 在 TypeScript 的 基础 上 自 创 了 一 个 名 叫 Atscript 的 语言 。 后 
来 ， Angular 开 发 组 寻求 与 TypeScript 开 发 组 进行 合作 ， 最 终 令 Annotation 特 性 被 加 入 了 Typescript 的 标准 语法 中 。 


Typescript 也 在 随 着 ECMAScript 标 准 的 推进 而 发 展 ， 它 逐步 实现 了 ECMAScript6 中 的 一 些 新 特性 ， 并 且 人 允许 编译 成 ECMAsScript 6 标准 的 JavaScript， 当 然 我 们 也 可 以 结合 Babel 这 类 插件 将 它 编译 为 


ECMAScript 5。 


9.2 SEO 


随 着 Web2.0 的 普及 ， 单 页 面 应 用 (Single Page Application，SPA) 已 经 成 为 最 流行 的 趋势 。 在 Wiki 对 SPA 的 定义 为 : 在 Web 页 面 中 ， 为 了 得 到 像 桌 面 图 形 化 界面 (GUI) 程序 一 样 流畅 体验 的 一 种 架 
构 设计 趋势 。 它 具有 更 好 的 用 户 体验 ， 更 少 的 数据 请 求 ， 更 轻 的 服务 器 负载 ， 更 好 的 性 能 优势 。 它 分 离 了 前 后 端 开发 ， 以 便于 我 们 在 日 常 工 作 中 分 工 合作 。 


是 因为 目前 的 搜索 引擎 “ 蜂 蛛 ” (把 


Ln 
| 


但 如 果 我 们 开发 的 系统 需要 搜索 引擎 优化 (SEO) 来 引导 更 多 的 用 户 流量 ， 那 么 ，Angular 有 着 显著 的 缺陷 ， 更 确切 地 说 : 所 有 的 SPA， 都 有 着 显著 的 缺陷 。 


虫 ) ， 都 还 不 能 很 好 的 采集 在 浏览 器 上 用 JavaScript 动 态 生成 的 内 容 。 但 这 并 不 意味 着 没有 可 以 让 SPA 实 现 SEO 的 解决 方案 。 在 我 们 已 经 选择 了 Angular 框 架 的 前 提 下 ， 我 们 需要 关注 的 话题 就 变 为 了 : 如 何 
在 以 交互 为 主 的 SPA 上 实现 SEO? 


我 们 知道 ， 搜 索引 警 是 靠 “蜘蛛 ”来 抓 取 页 面 的 ， 但 是 这 些 蜂 蛛 都 是 单 细胞 动物 ， 它 们 只 会 下 载 HTML 等 文件 ， 而 不 会 对 其 中 的 JavaScript 进 行 解释 。 于 是 ， 像 Angular 这 样 的 单 页 面 应 用 就 得 总 了 ， 它 


的 大 部 分 DOM 结 构 都 是 动态 生成 的 。 显 然 ， 在 单 页 面 应 用 越 来 越 多 的 时 代 ， 这 些 单 细胞 的 蜘蛛 需要 大 幅 改 进 才 行 ， 遗 憾 的 是 ， 现 在 还 没有 搜索 引擎 能 完全 实现 它 ，Google、 百 度 等 将 会 在 这 一 方面 努力 改 
进 。 


作为 替代 ，Google 提 供 了 一 种 新 的 方案 ， 当 它 发 现形 如 http://some.url/#! /someHash 的 链接 时 ， 就 会 尝试 把 这 个 URL 重 组 为 http://some.url/?_escaped fragment_=someHash 的 形式 ， 服 务 器 需 
要 处 理 这 种 形式 ， 并 且 给 蜂 蛛 返回 一 个 与 Ajax 地 址 相同 内 容 的 静态 页 面 。 


看 起 来 ， 这 是 一 个 好 方案 ， 不 过 ， 这 是 在 中 国 ! 百度 目前 还 没 实现 Google 的 这 一 标准 版 标准 ， 也 没 树立 自己 的 标准 。 于 是 ， 这 个 原本 非常 不 错 的 方案 ， 在 中 国 没 有 用 。 


幸运 的 是 ， 我 们 还 一 颗 最 后 的 “救命 的 稻草 ” ， 虽 然 它 不 够 理想 ， 但 是 它 能 够 很 好 的 工作 ， 能 够 快速 、 方 便 的 部 署 使 用 。 它 就 是 Prerender (预先 泻 染 ) 。 


Prerender 的 核心 原理 非常 简单 : 它 会 根据 HTTP 请 求 的 “user-agent” 头 信息 ， 或 者 是 Google 的 SEO 协议 ， 来 判断 当前 的 访问 用 户 是 不 是 “ 蜂 蛛 ”， 然 后 既然 得 到 的 判断 来 决定 是 否 需要 拦截 我 们 的 
HTTP 请 求 。 我 们 场景 的 每 一 只 “蜘蛛 ”都 会 有 它 自己 的 “user-agent” 标 识 。Prerender 同 时 支持 对 很 多 “蜘蛛 ”的 辨识 ， 这 里 也 包括 国内 的 知名 企业 -百度 。 下 面 是 来 自 prerender-node 的 代码 : 


// 这 里 注释 掉 Googlebot、Yahoo、Bingbot 是 因为 它们 已 经 支持 Google SEO 协 议 , 会 利用 _escaped fragment 方式 来 判断 
prerender.crawlerUserAgents = [ 

// 'googlebot', 

// ‘yahoo', 

// 'bingbot', 

'baiduspider', 

'facebookexternalhit', 

‘twitterbot', 

'rogerbot', 

'linkedinbot', 

'embedly', 

"quora link preview', 

'showyoubot', 

'outbrain', 

'pinterest', 

'developers.google.com/+/web/snippet', 

'slackbot', 

'vkShare', 

'W3C_Validator', 

'redditbot' 


表面 看 ， 在 内 存 中 泻 染 Web 页 面 并 执行 相应 的 JavaScript 代 码 ， 并 不 是 一 件 容易 的 事 ， 不 过 好 在 我 们 不 用 自己 来 实现 它 。 


在 现代 浏览 器 中 主要 分 为 两 个 主要 模块 : UI 解析 引擎 和 JavaScript 执 行 引 警 。 众 所 周知 ，Google V8 引擎 的 分 离 ， 促 成 了 如 今 “ 如 日 中 天 ”的 高 性 能 异步 |/O 平 台 : Node.js。 


同样 ， 我 们 将 浏览 器 的 UI 演 染 分 离 ， 保 存 内 存 DOM 的 泻 染 树 解析 引擎 ， 则 可 以 获得 一 个 完整 的 浏览 器 功能 ， 却 不 包含 UI 演 染 的 浏览 器 ， 这 称 为 HeadLess 框 架 。 这 就 是 说 ， 我 们 可 以 在 服务 器 的 内 存 中 
完成 对 页 面 的 泻 染 ， 甚 至 可 以 模拟 点 击 、 打 印 等 操作 ， 而 不 需要 一 个 真实 的 用 户 界面 。 在 Prerender 方 案 中 ， 使 用 的 是 HeadLess 中 著名 的 框架 一 一 就 像 我 们 在 Chrome Dev Tools 的 Element 页 所 看 到 的 一 


样 。Prerender 利 用 的 是 基于 webkit 的 headless 浏 览 器 -Phantomjs， 它 利用 Phantomjs 去 加 载 网 页 ， 并 等 待 Document Ready 后 在 才 去 获取 当前 运行 时 的 HTML， 以 及 对 该 HTML 内 容 加 工 处 理 ， 去 掉 无 用 
的 CSS 和 JavaScript 代 码 块 ， 然 后 将 其 返回 给 无 能 的 “ 蜂 蛛 ”。 


整个 交互 过 程 如 图 9-1 所 示 。 


当然 ， 这 么 好 的 创意 ， 自 然 已 经 被 人 实现 为 产品 : http://prerender.io/ 就 是 一 位 先行 者 ， 而 且 做 得 已 经 相当 成 熟 。 它 不 但 提供 了 在 线 服务 ， 而 且 全 部 源 代码 开源 。 你 也 可 以 享受 这 “免费 的 午餐 ”， 搭 
建 服务 器 。 可 以 自由 下 载 Prerender 的 源码 并 部 署 在 私有 的 环境 中 ， 它 只 需要 一 个 可 运行 Nodejs 的 环境 ; 同时， 我们 也 可 以 使 用 它 提供 的 云 服 务 ， 这 是 一 套 部 署 在 亚马逊 AWS 上 的 在 线 云 服务 。 
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图 9-1 Prerender 的 交互 过 程 


无 论 使 用 哪 种 方式 ， 都 只 是 提供 了 一 个 预 泻 染 服务 器 ， 要 想 让 它 对 搜索 引 丈 生效 ， 我 们 还 需要 一 个 额外 的 客户 端 ， 它 负责 判断 Http 请 求 中 的 “user-agent” 头 信息 ， 来 决定 正常 泻 染 还 是 需要 转 给 
Prerender 服 务 。 在 Prerender 的 社区 ， 已 经 很 成 熟 了 ， 它 由 Nodejs、Rails、Java、Asp.net、Nginx 等 数 十 种 客户 端 方式 ， 我 们 可 以 自由 选择 。 在 这 里 仅 以 Nginx 为 例 ， 下 面 是 官方 给 出 的 范例 配置 : 


server { 

listen 80; 

server name example.com; 

root /path/to/your/root; 

index index.html; 

location / { 
try_files $uri Q@prerender; 

} 

location Qprerender { 
#proxy set header X-Prerender-Token YOUR TOKEN; # 如 果 使 用 官方 提供 的 Prerender 服 务 ， 反 注释 这 身 ， 用 你 的 Token 替 换 YOUR TOKEN 
set $prerender 0; 
if ($http user agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot |embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot |vkShare|W3C _V 

set $prerender 1; 


} 
if ($args ~ " escaped fragment ") { 
Set $prerender 1; 


} 
if ($http user agent ~ "Prerender") { 
set $prerender 0; 


} 
if ($uri ~ "\.(jslcss|lxml|less|png|jpg|jpeglgiflpdfldoc|txt|icolrss|lziplmp3|rarlexe|wmv|doclavilppt|mpglmpeg|tif|wav|mov|psdlailxls|lmp4|m4alswfldat|dmg|isolflv|m4Av|torr 
Set $prerender 0; 
} 
resolver 8.8.8.8; # 可 以 强制 指定 Google 的 DNS， 或 者 注释 挤 它 来 使 用 系统 的 默认 配置 ,但 要 小 心 DNS 支 持 
if ($prerender = 1) { # 如 果 需 要 预先 泻 则 反 向 代理 到 Prerender 服 务 器 
set S$prerender "service.prerender. 和 
rewrite .* /$scheme://$host$request uri? break; 
proxy pass http://$prerender; # 反 向 代理 指令 


if ($prerender = 0) { # 正常 访问 则 重 写 为 首页 地 址 
rewrite .* /index.html break; 


} 


9.3 “IE 兼容 性 


浏览 器 兼容 性 是 前 端 开发 中 不 得 不 面 对 的 一 个 问题 。 而 最 突出 的 就 是 Internet Explorer (IE) 。 如 果 希 望 让 Angular 程 序 工作 在 IE8 或 者 更 早 的 IE 版 本 ， 那 么 请 认真 阅读 本 节 ， 它 将 为 你 节省 大 量 时 间 。 


对 绝 大 多 数 公司 来 阅 ， 兼 容 IE6 的 性 价 比 已 经 很 低 ， 而 ie7 则 几乎 已 经 绝迹 。 所 以 ， 常 见 的 兼容 性 下 限 是 IE8。 这 也 正 是 Angular 1.2x 的 兼容 性 目标 ，Angular 团 队 声明 : Angular 项 目的 持续 集成 服务 器 
会 在 IE8 下 运行 所 有 的 测试 ， 可 以 在 这 里 看 见 : http://ciangularjs.org。 但 这 些 测试 并 不 会 运行 在 IE7 及 以 下 版 本 ， 它 们 也 不 会 保证 Angular 将 会 工作 在 这 些 IE 版 本 上 。 


而 1.3 以 后 的 版 本 ，Angular 官 方 不 再 保证 对 IE8 的 兼容 ， 详 情 参 见 http://blog.angularjs.org/2013/12/angularjs-13-new-release-approaches.html。 当 然 ， 这 并 不 表示 一 定 不 能 在 IE8 用 ， 但 是 官方 
不 再 针对 IE8 做 集成 测试 ， 如 果 确 实 需要 在 兼容 IE8 的 同时 使 用 1.3， 那 么 就 自己 做 全 面 测试 吧 。 不 过 ， 这 样 做 的 性 价 比 太 低 ， 所 以 ， 在 工程 实践 中 ， 一 般 以 |E8 为 分 界 ， 如 果 需 要 兼容 ， 就 用 1.2， 否 则 就 上 
1.3+。 


9.4 ”访问 统计 


项 目 上 线 之 后 ， 开 发 并 不 会 结束 ， 需 要 收集 运营 环境 中 的 用 户 操作 数据 作为 产品 改进 的 基础 资源 。 当 然 ， 大 多 数 公司 都 不 需要 自己 实现 它 ， 因 为 有 Google 分 析 、 百 度 统计 之 类 的 免费 产品 ， 足 以 覆盖 大 
部 分 重要 的 运营 数据 。 


但 是 ， 从 传统 的 多 页 面 应 用 转 到 Angular 这 样 的 单 页 面 应 用 时 ， 收 集 数 据 的 方式 发 生 了 重要 变化 。 传 统 的 操作 统计 ， 需 要 在 重新 加 载 页 面 时 对 URL 进 行 记录 ， 而 单 页 面 应 用 中 ， 页 面 只 加 载 一 次 。 这 样 一 
来 ， 就 只 有 一 个 URL 的 统计 数据 ， 而 中 间 通 过 前 端 路 由 库 修改 的 URL， 只 要 不 引起 全 页 面 重 新 加 载 ， 那 么 这 个 URL 就 记录 不 到 。 


man 


解决 这 个 问题 ， 看 起 来 难 ， 其 实 很 简单 。 因 为 这 些 统计 产品 都 同时 提供 了 Ajax APl， 也 就 是 可 以 使 用 JavaScript 主 动 汇报 URL 的 变化 。 比 如 Google 的 ga/dataLayer API 或 百度 的 hmt APl。 


以 百度 为 例 : 调用 hmt.push (['_trackPageview'，someUrl]) ， 就 等 价 于 访问 了 多 页 面 应 用 中 访问 了 一 次 地 址 为 someUrl 的 页 面 。 


知道 了 如 何 汇报 ， 还 要 知道 在 什么 时 机 汇报 ， 这 需要 一 个 触发 机 制 ， 好 在 Angular 已 经 提供 了 这 样 的 机 制 ， 不 用 自己 费 脑筋 了 。 我 们 前 面 说 过 ，run 的 回调 函数 会 在 初始 化 完毕 ， 路 由 库 开 始 执行 前 触 
发 ， 也 就 是 说 它 早 于 所 有 的 控制 器 代码 。 在 这 里 挂 事 件 监听 器 ， 就 可 以 确保 每 次 URL 切 换 都 会 被 跟踪 到 。 这 个 事件 是 在 Angular 核 心 库 中 实现 的 ， 所 以 它 和 使 用 哪个 路 由 库 没有 关系 ， 甚 至 自己 在 代码 中 手动 
写 的 跳 转 也 能 正常 触发 它 。 利 用 这 个 事件 ， 路 由 级 的 操作 就 都 可 以 进行 记录 了 。 


范例 代码 如 下 : 


angular.module ('com.ngnice.app') .run(function ($rootScope, $location) { 
$rootScope.$on('$locationChangeSuccess', function () { 
Ey) 
hmt ‘push(['_ trackPageview', $location.path()]); 


至 于 申请 账号 、 配 置 、 引 入 之 类 的 ， 只 要 按照 官方 文档 一 步 步 照 着 做 就 可 以 了 。 


利用 类 似 的 原理 ， 也 可 以 加 入 Google、Doubleclick 之 类 的 访问 统计 。 


9.5 ”响应 式 布局 


现在 的 前 端 开发 ， 需 要 迎接 的 一 大 挑战 就 是 分 辩 率 。 各 种 设备 都 有 自己 的 典型 分 辩 率 ， 要 让 自己 的 页 面 在 很 多 种 分 辨 率 下 都 有 比较 好 的 效果 ， 该 怎么 办 呢 ? 显然 ， 不 可 能 简单 地 进行 等 比 缩放 ， 在 大 屏 
幕 上 合适 的 页 面 ， 等 比 缩放 到 小 屏幕 上 就 会 显得 反 人 类 。 理 想 的 解决 方案 是 大 屏幕 和 小 屏幕 下 连 布局 都 不 一 样 ， 比 如 大 屏幕 下 是 左右 布局 ， 小 屏幕 下 是 上 下 布局 ， 并 且 把 导航 缩 成 菜单 。 


想 达到 这 种 效果 ， 用 Javascript 是 不 合适 的 ， 虽 然 能 达到 目的 ， 但 写 起 来 会 很 繁琐， 更 重要 的 是 ， 这 本 来 就 不 是 JavaScript 的 活 儿 ，Javascript 应 该 是 描述 交互 的 ， 而 不 是 外 观 。 那 么 ， 最 佳 的 候选 人 
就 是 CSS 了 ， 它 本 来 就 擅长 描述 外 观 。 事 实 上 ，(CSS 早 就 考虑 到 了 这 个 问题 ， 它 设计 了 一 种 叫 作 媒体 查询 (Media Query) 的 技术 来 支持 不 同 而 分 辨 率 ， 甚 至 不 同 的 显示 设备 ， 如 打印 机 和 屏幕 。 


在 媒体 查询 的 支持 下 ， 一 段 CSS 可 以 只 在 当前 的 显示 媒体 符合 一 定 要 求 的 情况 下 才 生 效 ， 比 如 屏幕 宽度 大 于 或 小 于 一 定 尺寸 、 横 屏 还 是 竖 屏 、 色 深 是 8 位 还 是 32 位 等 。 响 应 式 布局 中 ， 主 要 用 到 的 是 对 屏 
幕 宽度 的 判断 ， 屏 幕 方向 、 高 度 之 类 的 也 偶尔 会 用 到 。 


Bootstrap 就 是 一 个 典型 的 支持 响应 式 布局 的 Css 框架， 例如 ， 它 常用 的 container 类 是 这 样 定义 的 : 


/* Container 的 基本 风格 ， 和 屏幕 尺寸 无 关 。 这 里 定义 了 衬 距 和 水 平 居 中 */ 
.container { 

padding-right: 15px; 

padding-left: 15px; 

margin-right: auto; 

margin-left: auto 


} 
/* 小 屏幕 上 ， 宽 度 为 750 像 素 */ 
@media (min-width: 768px) { 
.container { 
width:750px 
} 


i 
/* 中 等 屏幕 上 ， 宽 度 为 970 像 素 */ 
@media (min-width: 992px) { 
.container { 
width:970px 
} 


} 
/* 大 型 屏幕 上 ， 宽 度 为 1170 像 素 */ 
@media (min-width: 1200px) { 
.container { 
width:1170px 
} 


由 于 CSS 的 规则 是 后 定义 的 规则 会 覆盖 先 定义 的 ， 所 以 我 们 这 里 只 需要 定义 min-width 就 可 以 了 ， 一 旦 达到 了 下 一 级 的 最 小 宽度 范 B 


， 就 自然 被 下 一 级 的 规则 覆盖 了 。 


出 | 


经 过 这 样 的 定义 ， 屏 幕 中 心 区 的 宽度 就 会 跟着 屏幕 大 小 而 调整 了 。 


Bootstrap 其 他 的 布局 类 也 都 定义 了 媒体 查询 规则 ， 除 此 之 外 ， 还 有 一 些 专门 用 来 支持 响应 式 布局 的 工具 类 ， 如 hidden-xs、hidden-sm、hidden-md、hidden-lg 等 ， 根 据 名 字 就 可 以 看 出 ， 它 们 会 在 
超 小 型 、 小 型 、 中 型 、 大 型 屏幕 上 生效 ， 并 隐藏 当前 元 素 。 


9.6 国际 化 


在 Angular 框 架 中 的 为 我 们 提供 了 I18n 和 L10n 模 块 ， 其 中 118n 是 Internationalization (国际 化 ) 的 缩写 ， 是 使 开发 的 产品 能 很 容易 适应 不 同 的 语言 和 地 区 间 文 化 风俗 的 变化 的 过 程 。 而 L10n 则 是 
Localization (本 地 化 ) 的 缩写 ， 是 为 了 使 应 用 软件 能 够 在 某 一 特定 语言 环境 或 地 区 的 用 户 的 使 用 ， 而 加 入 本 地 特殊 化 部 件 和 翻译 后 文本 的 过 程 。 对 于 应 用 程序 开发 者 而 言 ， 国 际 化 意味 着 需要 从 应 用 程序 中 
抽 离 所 有 的 文本 字符 串 信 息 和 特殊 的 地 域 特性 (如 时 间 、 货 币 格式 ) 。 而 本 地 化 意味 着 提供 翻译 后 的 文本 数据 和 具有 地 域 特性 的 格式 数据 。 


当前 版 本 中 Angular 为 118n/L10n 提 供 了 : Datetime、Number 以 及 Currency 之 类 的 特定 Angular Filter， 我 们 可 以 轻松 地 利用 它们 来 应 用 于 我 们 的 应 用 程序 之 中 。 同 时 Angular 也 通过 ngPluralize 指 令 
为 我 们 提供 了 对 多 元 化 地 域 的 支持 。Angular 提 供 的 这 些 本 地 化 组 件 都 会 依赖 于 glocale 这 个 Angular 服 务 来 实现 本 地 化 特性 设置 。 这 些 库 ， 你 都 可 以 从 Angular 的 开发 包 的 i18n 目 录 下 找到 。 


在 开始 国际 化 开发 任务 之 前 ， 我 们 需要 明白 地 域 标识 这 个 概念 。 一 个 地 区 标识 (Locale) 是 指 一 个 按 地 理 、 政 治 、 文 化 划分 的 区 域 。 常 用 的 地 区 标识 由 “语言 标识 ”和 “国家 标识 ”两 部 分 组 成 。 例 如 
我 们 常用 的 地 域 标识 : en-US，en-AU，zh-CN 这 些 都 是 合法 的 地 域 标识 ， 它 们 都 是 由 “语言 标识 ”和 “国家 标识 ”组 成 ， 如 en 代表 英语 系 ，zh 为 中 文 ， 而 CN 代表 中 国 ，US 则 是 美国 。 有 时 “国家 标 
识 ” 是 可 选 的 ， 所 以 像 en，、zh、sk 这 样 的 地 域 标识 也 是 合法 的 。 感 兴趣 的 读者 ， 你 可 以 查看 ICU 网 站 来 获取 更 多 的 地 区 标识 信息 。 


对 于 Angular 中 常用 的 国际 化 Filter， 我 们 可 以 如 下 方式 很 简单 的 使 


{{ 1000 | currency }} 


这 些 配置 基础 的 地 域 特性 配置 信息 ，Angular 将 其 封装 在 $local 服 务 中 ， 并 且 Angular 也 为 我 们 提供 了 很 多 地 域 表 示 下 的 $local 服 务 。 我 们 可 以 自由 的 选择 我 们 所 需要 的 配置 信息 ， 然 后 将 它 加 入 我 们 的 
应 用 程序 中 。 


另外 在 Angular 社 区 也 有 很 多 关于 国际 化 的 开源 项 目 ， 其 中 angular-translate 最 为 成 功 ， 它 的 官方 文档 地 址 在 : https:/Wangulartranslate.github.io/。 它 是 一 个 能 够 很 快 上 手 的 框架 ， 它 提供 了 一 堆 的 
Fitter、Directive 以 及 Service 来 实现 ， 并 且 它 也 支持 延迟 加 载 、 更 多 的 多 元 化 信息 。 同 时 它 也 是 个 灵活 的 框架 ， 我 们 能 够 很 容易 的 自 定义 自己 的 加 载 器 ， 错 误 处 理 器 等 。 


恒 9-2 是 angular-translate 的 总 体 设计 图 和 相关 概览 图 。 
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图 9-2 ”angular-translate 总 体 设计 下 


下 面 是 它 的 文档 的 实例 : 


angular.module ('com.ngnice.demol', ['pascalprecht.translate']) 
.Constant ('translations', { 
HEADLINE: 'What an awesome module!', 
PARAGRAPH: 'Srsly!', 
NAMESPACE: { 
PARAGRAPH: 'And it comes with awesome features!' 
} 
地 
.config(['$translateProvider', 'translations', function($translateProvider, translations) { 
// 添加 翻译 对 照 表 
$translateProvider 
.translations('en', translations) 
.PreferredLanguage ('en'); 


Hs 


我 们 则 可 以 怎么 使 用 它 : 


<h1>{{ 'NAMESPACE .PARAGRAPH' | translate }}</hl> // filter 
<hl1 translate='NAMESPACE.PARAGRAPH'></hl> // directive 
<hl1 translate>{{ 'NAMESPACE .PARAGRAPH' }}</hl> // directive 


同样 我 们 也 可 以 在 代码 中 使 用 它 : 


angular.module ('com.ngnice.app') .controller ('DemoCtrl', function(fullNameFilter) { 

var wm = this; 

Stranslate ('HEADLINE') .then (function (headline) { 
wm.headline = headline; 

Hs 

$translate ('PARAGRAPH') .then (function (paragraph) { 
vm.paragraph = paragraph; 

Ds 

Stranslate ('NAMESPACE .PARAGRAPH') .then (function (anotherOne) { 
wm.namespaced paragraph = anotherOne; 

)¥ 

return vm; 


Ds 


更 多 的 关于 angulartranslate， 感 兴趣 的 读者 可 以 访问 它 的 官方 https://angulartranslate.github.io/， 花 上 10 分 钟 的 时 间 ， 相 信 你 也 可 以 开始 应 用 于 你 的 项 目 了 ， 笔 者 不 再 这 里 深入 了 。 


9.7 动画 


现在 网 页 应 用 对 用 户 体 验 的 要 求 越 来 越 高 ， 动 画 也 随 之 变 得 更 重要 ， 特 别 是 在 手机 端 ， 动 画 已 经 是 不 可 或 缺 的 功能 。 


动画 主要 分 为 CSS 动 画 和 JavasScript 动 画 两 种 。 实 际 上 ，Web 端 的 所 有 动画 ， 其 底层 原理 都 是 CSS 动 画 ， 浏 览 器 为 这 些 CSS 动 画 提供 了 原生 支持 ， 我 们 说 过 ，CSs 是 负责 外 观 的 ， 而 动画 正 是 外 观 的 一 部 
分 。 所 谓 Javascript 动 画 ， 其 实 所 做 的 主要 工作 是 把 多 个 CSS 动 画 用 程序 化 的 方式 串 起 来 ， 而 不 是 做 每 50 毫 秒 修改 一 次 元 素 坐标 之 类 的 事情 。 


Angular 为 这 两 种 动画 都 提供 了 支持 。 要 想 全 面 讲解 ， 至 少 得 整整 一 章 的 篇 幅 ， 这 里 只 做 简要 介绍 。 


9.8 手机 版 开发 


9.8.1 Hybrid 应 用 


这 是 一 个 移动 互联 网 大 爆发 的 时 代 。 基 于 Android 和 iOS 的 设备 越 来 越 多 ， 各 种 产品 也 一 帘 蜂 地 延伸 到 了 移动 设备 上 。 仪 以 天 猫 公 布 的 数据 来 看 ， 双 十 一 期 间 ，50% 以 上 的 订单 是 从 手机 下 的 。 也 许 你 的 
产品 经 理 正 催 着 你 开发 手机 版 ! 怎么 办 ? 


当然 ， 你 可 以 从 头 学 习 Android/iOS 开 发 ( 称 为 “原生 应 用 ”) ， 走 入 一 个 不 熟悉 的 开发 环境 。 这 种 方式 用 户 体验 好 ， 但 是 投入 大 、 周 期 长 。 


那么 ， 有 没有 捷径 呢 ? 有 ! 在 移动 开发 领域 ，Hybrid 架 构 正 风 摩 一 时 。Hybrid 直 译 过 来 是 “混血 儿 ”， 谁 跟 谁 的 混血 呢 ? “原生 应 用 ”和 “Web 应 用 ”的 混血 。 简 单 点 说 就 是 用 原生 代码 做 个 “ 壳 ”， 
内 部 是 一 个 Web 应 用 。 所 谓 “ 壳 ”， 其 实 就 是 一 个 浏览 器 内 核 ， 它 负责 加 载 页 面 ， 并 且 通 过 一 个 统一 的 接口 ， 将 一 些 手机 操作 系统 中 的 功能 导出 给 Web 应 用 ， 使 Web 应 用 也 能 实现 原生 应 用 的 功能 。 


这 种 方式 最 大 的 优点 就 是 跨 平台 ， 无 论 是 Android，10S 还 是 手机 浏览 器 ， 都 可 以 使 用 同一 套 页 面 、 同 一 套 JavaScript 和 CSS。 


对 于 公司 ， 采 用 Hybrid 架构 意味 着 人 才 的 专业 化 、 人 力 成 本 的 降低 、 开 发 周期 的 缩短 。 对 于 个 人 ， 采 用 Hybrid 架构 意味 着 技能 的 复 用 ， 职 业 空间 的 拓展 。 


当然 ， 从 原理 上 讲 ，Hybrid 架 构 无 法 赶 上 原生 应 用 的 效果 ， 所 以 必须 在 效果 、 开 发 周期 、 人 力 成 本 之 间 做 出 权衡 。 随 着 硬件 性 能 越 来 越 高 ， 对 于 大 多 数 应 用 来 说 ，Hybrid 已 经 足够 了 。 


事实 上 ， 现 在 很 多 应 用 都 已 经 是 Hybrid 的 了 。 最 著名 的 就 是 微 信 了 ， 它 的 主体 功能 ， 如 通讯 ， 是 原生 的 ， 而 开放 给 第 三 方 的 接口 ， 比 如 公众 号 AP1， 则 是 Web 的 。 更 不 用 说 各 种 网 站 的 客户 端 了 ， 它 们 
几乎 都 是 Hybrid 的 。 


要 注意 ，Hybrid 是 一 种 概念 ， 而 不 是 一 个 具体 的 技术 ， 比 如 Cordova， 你 有 很 多 种 选择 ， 甚 至 还 可 以 从 头 自己 实现 Hybrid 程序 。 不 过 ， 由 于 Hybrid 对 交互 性 的 苛刻 要 求 ， 用 来 实现 Web 部 分 的 通常 都 是 
页 面 应 用 (SPA) 。Angular 就 是 一 个 好 选择 ， 当 然 ， 除 此 之 外 ， 还 有 很 多 选择 ， 比 如 Backbone、jqMobile、React 等 。 


选择 了 Hybrid 架 构 之 后 ， 仍 然 有 很 多 问题 需要 处 理 。 首 先 就 是 把 页 面 做 出 原生 程序 的 外 观 和 感觉 。 从 CSS 的 能 力 上 说 ， 肯 定 可 以 实现 它 ， 不 过 需要 处 理 的 细节 有 很 多 ， 特 别 是 你 还 需要 给 iOS 和 Android 
程序 不 同 的 外 观 。 明 智 的 选择 是 根据 自己 的 需求 ， 选 择 一 个 现成 的 CSS 框 架 ， 比 如 Bootstrap 的 手机 版 皮肤 、lonic 等 。 然 后 在 这 些 框架 的 基础 上 进行 定制 ， 调 整 一 些 细节 ， 最 终 做 成 你 们 的 设计 师 希 望 的 样 
子 。 其 次 ,需要 支持 很 多 种 新 的 操作 风格 ， 如 触摸 、 左 右 滑 屏 等 。Angular 通 过 angular-touch.js 实 现 了 这 两 种 基本 操作 ， 它 直接 响应 触摸 操作 ， 并 触发 ng-click 回 调 一 一 就 像 用 鼠标 时 一 样 ， 而 左右 滑 屏 的 
操作 则 被 封装 成 了 ng-swipe-left 和 ng-swipe-right 指 令 。 但 是 更 多 的 高 级 操作 ， 如 捏 的 缩放 、 长 按 等 ， 则 没有 提供 内 置 的 支持 。 要 想 响 应 它们 ， 可 以 使 用 一 个 第 三 方 库 : angular-gestures， 它 基于 另 一 个 
著名 的 触 控 事 件 库 hammerjs， 具 体 的 用 法 请 参见 它 的 文档 。 最 后 ， 需 要 支持 很 多 种 不 同 的 分 辨 率 。 


现在 的 移动 设备 有 很 多 种 常用 分 辩 率 ， 比 电脑 的 常用 分 辨 率 多 很 多 ， 这 就 要 求 CSS 的 设计 更 有 弹性 。 比 如 : 


“ 避免 强制 指定 宽度 、 高 度 的 像素 数 ， 而 是 用 百分比 或 者 让 它 根据 内 容 自动 确定 大 小 。 
“ 使 用 流 式 布局 ， 让 它 在 必要 时 自动 折 行 ， 而 不 是 变 得 过 小 。 
: 使 用 响应 式 布局 ， 利 用 媒体 查询 功能 在 小 分 辨 率 下 自动 改变 一 些 参数 ， 如 边 距 、 位 置 等 。 


“ 当然 ， 还 有 很 多 技巧 ， 无 法 一 一 列举 。 


不 过 ， 很 多 现成 的 移动 端 CSs 框 架 ， 比 如 前 面 提 到 的 Bootstrap、lonic 等 ， 已 经 处 理 了 这 些 问题 ， 不 用 自己 重复 造 轮子 了 。 虽 然 如 此 ， 了 解 这 些 知识 ， 对 于 前 端 开 发 人 员 仍 然 是 很 重要 的 ， 至 少 可 以 让 
尔 自己 写 的 部 分 易于 维护 。 


[ss 
的 


附录 A ”相关 资源 


A.1 综述 


不 管 是 在 客户 现场 咨询 ， 还 是 社区 活动 ， 以 及 Angular 中 文 社区 QQ 群 中 ， 经 常 有 人 问 到 : 能 否 推荐 一 些 前 端 资源 或 者 书籍 ， 如 何 才能 学 好 前 端 呢 ? 借 写 此 书 的 机 会 ， 在 这 里 笔者 分 享 一 些 对 自己 受益 的 
前 端 学 习 书籍 。 


不 管 是 前 端 开 发 还 是 后 端 开发 ， 笔 者 认为 我 们 所 实施 的 是 软件 工程 实践 ， 理 论 知 识 是 重要 的 基础 ， 但 是 在 工程 实践 中 最 为 重要 的 仍然 是 练习 、 再 练习 。 特 别 在 前 端的 世界 里 ， 浏 览 器 的 兼容 
性 ，Javascript 的 “ 坑 ” 这 些 知识 都 是 需要 靠 我 们 的 亲身 实践 来 总 结 积累 的 经 验 ， 它 们 虽然 也 被 很 多 “大 神 ” 记 录 在 了 他 们 的 书籍 、 博 客 ， 或 散落 在 各 种 江湖 “武功 秘籍 ”之 中 ， 但 还 是 需要 我 们 不 断 学 
习 、 总 结 、 融 会 贯通 ， 最 终 变 为 自己 的 财富 。 


“一 万 小 时 理论 ”说 道 ， 无 论 我 们 是 天 资 聪慧 ， 或 者 是 笨拙 ， 相 信 付 出 时 间 的 长 度 能 帮助 我 们 抹 平 这 些 。 然 而 在 这 “浮躁 ”的 世俗 之 下 ， 该 如 何 沉 下 心 来 学 习 ， 这 可 能 是 困扰 很 多 人 的 问题 。 对 于 阅读 
习惯 ， 笔 者 经 常 的 回复 是 以 下 两 句 话 : 


“ 对 于 学 习 ， 比 起 时 间 管 理 理论 ， 更 重要 的 是 一 点 情绪 的 控制 调节 ， 以 及 自律 能 力 。 当 “痛苦 ” 变 为 一 种 习以为常 的 节奏 时 ， 它 不 再 是 你 的 “痛苦 ”。 


“ 最 好 的 阅读 ， 一 定 不 是 足够 多 的 输入 ， 反 而 应 该 注重 阅读 后 的 输出 ， 这 可 以 是 一 入 博客、 一 次 演讲 分 享 等 。 请 不 要 随意 放 过 通过 思考 和 总 结 将 别人 的 知识 变 为 自己 的 知识 的 机 会 。 


下 面 列 出 一 些 笔者 认为 有 用 的 在 线 资源 和 书 单 ， 供 大 家 参考 和 进一步 的 学 习 。 


A.1.1 本 书 相关 的 资源 


1. 双 狼 说 微 信号 


这 是 本 书 的 官方 微 信 号 。 这 里 不 但 会 有 本 书 的 勘误 信息 和 后 续 版 本 的 发 布 计 划 ， 还 会 有 我 们 写 的 最 新 文章 。 除 此 之 外 ， 我 们 还 会 把 所 看 到 的 精彩 技术 文章 转发 至 此 。 


不 过 ， 如 果 有 问题 需要 帮忙 ， 请 到 我 们 的 QQ 群 提问 。 我 们 精力 有 限 ， 无 法 一 一 解答 ， 而 这 些 群 中 会 有 很 多 热心 网 友 可 以 互相 帮助 。 


2.QQ 群 


一 群 : 278252889 二 群 : 305739270 三 群 : 207542263 四 群 : 454120058Angular 互 助 组 : 200242234ionic 开 发 实践 : 110455272 


由 于 群 容量 有 限 ， 为 了 充分 利用 资源 ， 每 个 人 请 只 加 一 个 群 。 


3.NgNice 网 站 http://ngnice.com/ 


本 书 是 一 本 Angular 深 度 解 析 的 书籍 。 对 于 很 多 Angular 的 初学 者 来 说 ， 也 许 一 开始 还 不 能 适应 。 这 种 情况 下 ， 我 们 推荐 你 先 到 ngnice (http://www.ngnice.com/) 了 解 Angular 的 基础 知识 ， 然 后 回 
来 继续 阅读 本 书 。 在 ngnice 中 主要 分 为 几 部 分 : 


“ 官方 开发 者 文档 中 文 版 翻译 : http://docs.ngnice.com/guide， 这 是 我 们 组 织 一 批 网 友 翻 译 的 。 
:API 文档 英文 版 原版 。 这 里 主要 是 为 了 无 法 翻 墙 到 Angular 官 网 的 同学 准备 的 。 


“ ngShowCase， 在 这 里 收集 了 很 多 Angular 常 用 的 组 件 例子 。 有 些 例 子 你 可 以 直接 复制 到 你 的 项 目 中 使 用 。 有 些 例子 则 是 给 你 演示 了 一 些 常见 的 Demo， 你 仍然 需要 一 些 简单 的 修改 ， 或 者 经 过 定制 化 才能 
使 用 到 项 目 之 中 ， 但 它 给 我 们 了 开发 的 思路 。 http://www.ngnice.com/showcase/o 


4. 随 书 源码 及 勘误 
本 书 的 随 书 源码 都 放 在 https://github.com/ng-nice/code 中 ， 熟 悉 GitHub 的 人 可 以 clone 它 或 直接 下 载 zip 包 。 


勘误 放 在 https://github.com/ng-nice/book 中 ， 如 果 要 给 我 们 勘误 建议 ， 请 提 issue， 我 们 也 会 把 最 新 的 勘误 信息 放 在 这 里 。 


A.1.2 ”前 端 公 共 知 识 


《 认 知 与 设计 一 一 理解 Ul 设计 准则 》 一 一 这 本 书 的 作者 Jeff Johnson，UI Wizards 公 司 董 事 长 兼 首席 顾问 。 他 也 是 我 们 图 形 化 界面 开发 (GUI 设计 ) 的 先驱 ， 著 有 畅销 书 《GUI 设 计 禁 忌 》。 在 这 本 书 
中 作者 将 设计 准则 与 其 核心 的 认 知 学 和 感知 科学 高 度 统一 起 来 ， 使 得 设计 准则 更 容易 地 在 具体 环境 中 得 到 应 用 。 涵 盖 了 交互 计算 机 系统 设计 的 方方面面 ， 为 交互 系统 设计 提供 了 支持 工程 方法 。 不 仅 如 此 ， 
这 也 是 一 本 人 类 行为 原理 的 入 门 书 。 


笔者 个 人 虽然 不 是 一 个 十 足 的 前 端 设计 师 ， 但 是 在 这 过 去 的 一 年 里 ， 笔 者 一 直 在 尝试 着 将 自己 变 为 一 个 有 一 定 美感 能 力 的 设计 师 ， 这 本 书 给 笔者 很 多 交互 细节 方面 的 启发 。 


《简约 至 上 : 交互 式 设计 四 策略 》 一 一 作者 GilescColborne 曾 任职 于 英国 航空 公司 、 英 国 物理 学 会 出 版 社 和 灵 智 集团 ， 多 年 来 作者 潜心 钻研 交互 式 设计 与 易 用 性 ， 并 在 此 方面 颇 有 建树 。 自 从 iPhone、 
iPad 开 始 流行 以 来 ， 我 们 开始 追求 简单 易 用 的 产品 设计 。 无 论 是 互联 网 产品 ， 还 是 移动 应 用 ， 亦 或 其 他 交互 式 设计 ， 简 单 易 用 始终 都 是 赢得 用 户 的 关键 。 在 《简约 至 上 : 交互 式 设计 四 策略 》 中 ， 作 者 Giles 
提出 了 合理 删除 、 分 层 组 织 、 适 时 隐藏 和 巧妙 转移 这 四 个 达成 简约 至 上 的 终极 策略 ， 讲 述 了 为 什么 应 该 站 在 主流 用 户 一 边 ， 以 及 如 何 从 他 们 的 真实 需求 和 期 望 出 发 ， 简 化 设计 ， 提 升 易 用 性 。 创 造 出 卓 尔 不 
群 、 历 久 弥 新 的 用 户 体验 。 


在 当下 流行 的 苹果 、Google、 微 软 等 巨头 在 其 移动 平台 推动 的 拟 物化 、 扁 平 化 的 设计 ， 无 一 不 是 追求 一 种 简约 而 不 简单 的 视觉 美感 ， 我 们 的 设计 理念 再 次 从 富丽 堂皇 和 脐 肿 繁杂 的 页 面 中 返 现 归真 。 


A.1.3 MDN 


https://developer.mozilla.org/zh-CN/， 这 是 Mozilla 的 开发 者 文档 ， 对 于 Web 开 发 人 员 来 说 ， 我 们 可 以 从 这 里 理解 常用 的 JavaScript 等 APl， 以 及 当下 流行 的 Web 浏 览 器 技术 。 这 是 前 端 工 程 师 必 不 
可 少 的 文档 之 一 。 它 的 英文 版 地 址 是 : https://developer.mozilla.org/en-US/， 部 分 章节 也 提供 了 中 文 版 。 


A.14 CSS 


《精通 CSS- 高 级 Web 标 准 解决 方案 》 一 一 作者 Andy Budd 是 一 位 国际 顶尖 的 网 页 设计 师 ， 著 名 的 Web 标 准 倡 导 者 ， 网 页 咨询 公司 Clearleft 的 创始 人 之 一 。 曾 组 织 过 英国 首届 Web 2.0 会 议 ， 经 常 在 
Web Directions、An Event Apart、SXSW 等 国际 会 议 上 发 表演 讲 ， 参 与 一 些 国际 设计 奖项 的 评选 ， 他 还 是 .NET Magazine 的 咨询 委员 会 成 员 。 作 者 在 《精通 CSS: 高 级 Web 标 准 解 决 方案 》 这 本 书 中 ， 将 最 
有 用 的 CSS 技 术 汇总 在 一 起 ， 还 总 结 了 CSS 设 计 中 的 最 佳 实践 ， 讨 论 了 解决 各 种 实际 问题 的 技术 ， 填 补 了 一 直 以 来 CSS 图 书 的 空白 。 


CSS 作 为 Web 标 准 的 一 部 分 ， 已 经 成 为 现代 网 页 设计 中 必 不 可 少 的 关键 要 素 。CSS 看 似 简 单 ， 但 真正 精通 CSS 绝 非 易 事 。 在 使 用 CSS 开 发 网 站 时 ， 会 遇 到 形形色色 的 浏览 器 Bug 和 不 一 致 问题 ， 而 解决 方 
案 又 五 花 八 门 ， 往 往 让 使 用 者 感觉 干 头 万 绪 ， 不 知 从 何 着 手 。 大 部 分 的 问题 ， 你 都 可 以 从 这 本 书 中 找到 它 的 影子 所 在 。 


MDN 中 文 一 一 https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting started 


MDN 介 绍 同上 ， 这 里 是 它 关 于 CSS 技 术 的 文档 资源 部 分 。 


A.1.5 ”Sass 语 法 http://sass-lang.com/documentation/file.SASS_REFERENCE.html 


Sass 是 对 CSS 的 扩展 ， 它 让 我 们 静态 的 CSS 语 言 变 得 更 加 的 强大 、 优 雅 。 特 别 是 它 允 许 我 们 使 用 变量 、 谋 套 、Mixin、 导 入 等 众多 功能 ， 以 程序 思维 来 编写 CSS$， 以 更 好 的 模块 化 、 结 构 化 ， 复 用 Sass 代 
码 ， 得 到 更 好 的 灵活 性 、 重 用 性 和 维护 性 。 并 且 Sass 是 完全 兼容 CSS 语 法 的 。Sass 有 助 于 保持 大 型 样式 表 结 构 良好 ， 同 时 也 让 你 能 够 快速 开始 小 型 项 目 ， 特 别 是 在 搭配 Compass 样 式 库 一 同 使 用 时 。 


当然 我 们 也 可 以 选 Less: http://lesscss.org/， 或 者 stylus: https://learnboost.github.io/stylus/。 


A.1.6 JavaScript 入 门 


《Javascript 启 示 录 》 一 一 在 当下 的 Web 开 发 中 ，Javascript 已 经 不 再 是 一 门 “ 二 流 语言 ”了 ， 我 们 再 也 不 能 按照 旧时 代 那 样 简单 的 复制 、 粘 贴 来 弥合 前 端的 交互 了 。 它 已 经 成 为 了 每 一 个 Web 开 发 人 
必须 掌握 的 一 门 编程 语言 ， 但 JavaScript 语 言及 其 相关 技术 正在 变 得 越 来 越 复杂 。 如 何 掌握 JavaScript 的 基本 概念 和 核心 技术 ， 往 往 让 初学 者 和 新 手感 到 束手无策 。 这 本 书 在 有 限 的 篇 幅 内 ， 通 过 考察 原生 


澡 


JavaScript 对 象 ， 来 给 读者 展现 准确 的 JavaScript 世 界 观 ， 涉 及 对 象 、 


属性 、 复 杂 值 、 原 始 值 、 作 


域 、 继 承 、this 关 键 字 、head 对 象 等 时 


《Javascript 权 威 指南 》 也 是 一 本 不 错 的 Javascript 入 门 书籍 ， 但 是 笔者 个 人 不 是 那么 喜欢 i 


A.1.7 JavaScript 进 阶 


交 
bea 
名 
习 
悄 
如 
月 


要 概念 。 


书 ， 当 然 ， 如 果 你 有 足够 的 时 间 ， 也 可 以 选择 它 来 入 门 。 


《Javascript 语 言 精粹 》 一 一 这 本 书 的 作者 Douglas Crockford 是 一 名 来 自 Yahoo! 的 资深 JavaScript 架 构 师 ， 是 他 为 我 们 创建 了 JSON (JavaScript Object Notation) 格式 而 为 大 家 所 熟知 。 作 者 在 


本 书 中 通过 对 Javascript 语 言 的 分 析 ， 阐 述 了 Javascript 好 的 和 坏 的 特性 ， 也 从 中 筛选 出 更 


码 。 作 者 最 后 也 将 这 个 优秀 的 JavaScript 子 集 实现 为 了 以 后 的 JSlint、JSHint 等 js 工 


。 此 书 为 JavaScript 开 发 者 中 级 进 阶 书籍 ， 并 不 适合 初学 者 看 。 对 于 中 级 


了 ,但 是 看 这 本 书 能 够 帮 你 把 JavaScript 的 知识 点 融会 贯通 ， 将 我 们 零散 的 “知识 碎片 ”整合 在 一 起 。 


《编写 可 维护 的 JavaScript》 一 一 这 本 书 的 作者 Nicholas C.Zakas 是 一 名 前 端 


并 倡导 了 很 多 最 佳 实践 ， 包 括 渐进 增强 、 可 访问 性 、 性 能 、 扩 展 性 和 可 维护 性 等 。 


《编写 可 维护 的 Javascript》 这 本 书 向 JavasScript 开 发 人 员 阐述 了 如 何在 


码 。 它 的 内 容 涵盖 了 编码 风格 、 编 程 技巧 、 自 动 化 、 测 试 等 几 方 


对 于 编码 实践 ， 这 是 一 个 长 期 的 过 程 ， 笔 者 希望 大 家 在 看 完 这 本 书籍 之 后 ， 能 形成 一 套 


《基于 MVC 的 JavaScript Web 富 应 
依赖 、 模 板 引擎 和 数据 绑 定 、 远 程 数据 


《高 性 能 JavaScript》 一 一 本 书 的 作者 Nicholas C.Zakas， 在 上 面 已 经 出 现 过 他 的 另 一 著作 《编写 可 维护 的 JavaScript》。 在 越 来 越 重 的 前 端 富 客 
阁 能 帮助 我 们 在 开发 过 程 中 消除 性 能 瓶颈 。 了 解 如 何 提升 各 方面 的 性 能 ， 


的 一 个 重要 问题 。《 高 性 能 JavaScript》 这 本 书 为 我 们 揭示 的 技术 和 策 
生产 环境 的 最 佳 实践 等 。 


《DOM 启 蒙 》 一 一 在 Query 等 DOM 处 理 框架 主导 的 今天 ， 如 何 去 处 理 DOM ， 解 析 DOM ， 已 经 不 再 是 我 们 所 关心 的 难题 了 。 对 了 
Cody Lindley， 在 《DOM 启 蒙 》 一 书 中 通过 现代 浏览 器 原生 的 概念 与 代码 ， 将 这 些 “ 内 功 心 法 ”重新 带 加 


虽然 它 不 能 很 快 在 你 的 实际 项 目 中 被 运 
识 ， 就 没什么 能 阻止 你 深入 探索 Angular 源 码 | 


的 脚步 了 。 


A.1.8 REST 


开发 》 一 一 这 本 书 作 者 Alex MacCaw， 以 


面 ， 既 包括 具体 风格 和 原则 的 介绍 ， 也 包括 示例 和 技巧 说 明 ， 最 


属于 自 


自己 的 开源 M 


发 顾问 、 作 者 和 演说 家 。 他 著 有 《JavaScript 高 级 程序 设计 》、 


可 靠 性 、 可 读 性 和 可 维护 性 的 JavaScript 的 子 集 ， 以 便 我 们 能 发 扬 它 好 的 一 面 ， 来 创建 真正 可 扩 


展 和 高 效 的 代 


团 


后 还 介绍 


己 的 风格 规范 ， 使 得 


VC 框架 Spine 框 架 为 主体 ,给 大 家 介绍 了 如 何 来 构建 一 套 前 端 框架 。 比 如 : 如 何 处 理应 
载 等 最 佳 实践 和 原理 。 在 前 端 MVC 框 架 大 势 流行 的 今天 ， 这 不 失 为 帮助 大 家 理解 MVC 和 JavaScript 模 式 设计 | 
因而 不 得 不 放弃 Angular、Ember、React 等 框架 的 情况 下 ， 尝 斌 利用 这 里 所 学 的 模式 ， 来 搭建 一 套 基于 jQuery 或 者 Zeptojs 的 MVC 框 架 。 


了 如 何 通过 自动 化 的 工 


发 者 ， 


的 一 本 好 书 。 通 过 阅读 这 本 书 ， 我 们 可 以 在 因 


昌 然 很 多 知识 也 许 你 已 经 用 过 了 、 了 解 


《Ajax 高 级 程序 设计 》 和 《高 性 能 Javascript》 等 书籍 ， 
队 开 发 中 编写 容易 维护 的 高 质量 JavaScript 代 
和 方法 来 实现 一 致 的 编程 风格 。 


自己 的 编码 过 程 不 再 是 一 场 毫 无 章法 的 “游击 战 ”。 


内 部 模块 之 间 的 
为 各 种 原 


户 端 交互 程序 中 ， 性 能 也 是 我 们 前 端 工 程 师 所 需要 面临 
包括 代码 的 加 载 、 运 行 、DOM 交 互 、 以 及 构建 和 部 署 文件 到 


F 很 多 前 端 开发 者 来 说 ， 它 已 经 是 一 套 失传 多 年 的 “内 功 心 法 ”。 作 者 
了 我 们 的 “武林 江湖 ”。 从 中 我 们 可 以 理解 到 jQuery 等 DOM 处 理 框 架 如 何 来 处 理 DOM。 例 如 在 


起 来 ， 但 它 将 是 你 学 习 其 他 开源 JavaScript 框 架 的 利器 。 如 在 Angular 的 compile.js 中 的 源码 中 也 出 现 了 nodeType 的 判断 和 人 遍历。 如 果 你 已 经 拥有 了 这 些 知 


《REST 实 战 》 一 一 这 本 书 作者 JimcWebber， 他 是 ThoughtWorks 的 技术 主管 ， 工 作 于 可 信赖 的 分 布 式 系统 。 这 也 是 一 本 很 好 的 关于 RESTful 实 战 和 理论 的 书籍 。 当 下 ， 单 页 面 应 用 程序 (Single Page 


Application) 富 客户 端 JavaScript 框 架 越 来 越 盛行 ， 我 们 需要 支持 的 平台 ， 也 不 再 是 单一 的 PC 平台 了 ， 还 会 有 Mobile、iPad、 甚 至 可 能 是 一 个 物 联 网 的 终端 等 平台 的 多 样 性 。 所 以 为 了 业务 逻辑 的 复 用 ， 


我 们 也 开始 了 面向 服务 的 架构 (SOA) ， 最 终 RESTful 以 它 简单 、 引 上 
问 的 话 ， 那 么 你 可 以 从 《REST 实 战 》 这 本 书 中 找到 答案 。 书 中 以 一 个 


REST 英 基 论 文英 文 版 一 一 http://www.ics.uci.edu/~fielding/pubs/dissertation/fielding_dissertation.pdf。 


REST 全 称 是 Representational State Transfer， 中 文 意思 是 表述 性 状态 转移 。 要 想 了 解 RESTful 当 然 一 定 不 能 错过 其 提出 者 Roy Fielding 博 士 的 学 术 论 文 了 。 


A.1.9 ”编程 风格 与 习惯 


《代码 整洁 之 道 》 一 一 本 书 是 当代 敏捷 大 师 Rober C.Martin 的 经 典 之 作 。 软 件 质量 ， 不 但 依赖 了 
都 不 得 不 承认 。 作 者 在 《代码 整洁 之 道 》 之 中 提出 一 种 观念 : 代码 质量 与 其 整洁 度 成 正比 。 了 


F 兆 的 代码 ， 既 在 质量 上 较为 可 靠 ,也 为 


架构 及 项 


管理 , 而 


后 期 维护 、 升 级 莫 定 了 


消费 、Javascript 的 盛行 (JSON 是 天 然 的 Javascript 对 象 ) 等 众多 的 优势 所 胜出 。 如 果 你 有 “如 何 设计 一 个 好 的 RESTful 架 构 ” 这 个 疑 
0 啡 的 业务 为 核心 来 阐述 RESful API 的 设计 。 


无 论 是 敏捷 开发 流派 还 是 传统 开发 流派 ， 
良好 基础 。 作 者 作为 软件 界 的 “泰山 北斗 ， 他 


在 《代码 整洁 之 道 》 一 书 中 给 出 了 一 系列 行 之 有 效 的 整洁 代码 的 实践 。 作 者 在 书 中 说 : 这 就 是 每 一 个 优秀 程序 员 需 要 遵守 的 “童子 军 


码 ， 从 而 有 效 提升 代码 质量 。 


我 们 能 理 


虽然 本 书 是 Java 版 本 的 书籍 ， 似 乎 这 是 后 端 程序 员 的 


他 的 多 部 著作 《分 析 模 式 》、《UML 精 粹 》 和 《企业 应 


他 在 这 本 书 中 ， 清 晰 揭示 了 重 构 的 过 程 ， 解 释 了 重 构 
证 的 代码 变换 手法 的 动机 和 技术 。 本 书 也 是 现代 很 多 IDE 实 现 重 构 功 能 的 理论 基础 。 


《高 效 程序 员 的 45 个 习惯 》 本 书简 明 实 


、 见 解 深刻 


， 但 是 笔者 仍然 觉得 这 对 前 端的 代码 也 具有 很 大 的 借鉴 意义 。 不 管 前 端 还 是 


理 ， 以 及 持续 学 习 等 5 个 方面 积极 修炼 。 通 过 学 习 这 些 内 容 ， 养 成 这 些 好 的 习惯 ， 你 可 以 极 大 地 提升 


快速 了 解 很 多 敏捷 理论 和 实践 ， 如 TDD、 持 续集 成 、 价 值 反馈 等 ， 这 也 扩大 你 的 视野 。 


A.2 CSS&Sass 


对 于 


A.2.1 选择 器 类 型 


元 素 选择 器 : div 匹 配 所 有 <div> </div> 元 素 ，span 匹 配 所 有 <span> </span> ， 以 此 类 推 。* 匹 配 任何 元 素 ， 慎 用 。 


1D 选 择 器 : #id 


匹配 所 有 id 为 id 的 元 素 , 如 <div id= "domld"> </div>。 


类 选择 器 : .className 


匹配 所 有 class 


属性 选择 器 : 


后 端 转 前 端的 程序 员 来 说 ，CSS 是 一 个 不 得 不 迈 的 坎 ， 这 里 提供 一 篇 精简 的 文档 ， 力 求 浓缩 CSs 的 


的 经 典 。 


， 总 结 了 高 效 程序 员 在 开发 过 程 中 的 45 个 个 人 习惯 、 思 想 观念 和 方法 ， 有 助 了 


鞠 


[| 
。 和 个: 


解 并 遵循 这 一 些 军 规 ， 我 们 也 能 编写 出 干净 的 代 


后 端的 代码 ， 永 远 都 只 是 给 人 读 的 ， 机 器 只 是 偶尔 执行 下 而 已 。 


《 重 构 : 改善 了 既 有 代码 的 设计 》 一 一 本 书 的 作者 是 Martin Fowler， 他 是 世界 级 的 软件 开发 大 师 ，ThoughtWorks 首 席 科 学 家 。 他 在 面向 对 象 分 析 设 计 、UML、 模 式 、XP 和 重 构 等 领域 都 有 卓越 贡献 。 
架构 模式 》 等 都 已 经 成 为 脸 灾 人 


础 知识 ， 希 望 能 给 你 提供 帮 


属性 包含 className 的 元 素 ， 如 <div class= "className"> </div> 。 


发 人 员 在 开发 过 程 、 编 码 工作 、 开 发 者 态度 、 项 
自己 的 编程 实力 ， 更 快速 、 更 可 靠 地 交付 更 高 质量 的 软件 ， 从 而 成 为 真正 的 高 效 程序 员 。 在 本 书 中 你 也 能 


的 原理 和 最 佳 实践 方式 ， 并 给 出 了 何 时 以 及 何 地 应 该 开始 挖掘 代码 进行 改善 的 建议 。 书 中 给 出 了 70 多 个 可 行 的 重 构 ， 每 个 重 构 都 介绍 了 一 种 经 过 验 


和 团队 管 


， 更 高 级 的 知识 请 参见 前 


里 


给 出 的 书 单 。 


* [attrtName] 匹 配 所 有 带 有 atttName 的 元 素 ， 如 <div attrName> 或 <div atttName="someValue">/<div> ， 注 意 ， 它 只 管 是 否 出 现 ， 不 管 是 否 有 值 ; 
[atttName=someValue] 匹 配 所 有 atttName 为 someValue 的 元 素 ， 如 <div atttName=div atttName="someValue"></div> ; 
“ [attrName*=someValue 匹 配 所 有 attrName 属 性 值 中 包含 someValue 的 元 素 ， 如 <div attrName="begin-someValue-end"></div>; 


* [atttName^=someValue 匹 配 所 有 atttName 属 性 值 以 someValue 开 头 的 元 素 ， 如 <div attrName="someValueAndSuffix"></div>; 


“ [attrName$=someValue 匹 配 所 有 attrName 属 性 值 以 omeValue 结 尾 的 元 素 ， 如 <div attrName="prefixAndSomeValue"></div>。 


伪 类 选择 器 : : pseudoName， 用 来 表示 元 素 的 状态 、 所 处 位 置 等 虚拟 类 ， 常 用 的 有 : 


: hover: 鼠标 悬 停 于 此 元 素 上 。 


: focus: 此 元 素 具 有 输入 焦点 。 


: active: 此 元 素 被 鼠标 点 击 时 仍 处 于 按 下 状态 。 


: visited: 一 般 用 于 链接 ， 表 示 所 链接 到 的 地 址 已 经 被 访问 过 (在 历史 记录 中 ) 。 


: first-child: 此 元 素 是 父 元 素 下 的 第 一 个 子 元 素 。 


: last-child: 此 元 素 是 父 元 素 下 的 最 后 一 个 子 元 素 。 


: disabled: 此 元 素 被 禁用 ， 等 价 于 [disabled]。 


: enabled: 此 元 素 没 有 被 禁用 。 


: not: 对 伪 类 选择 器 取 反 。 如 : not (: first-child) 表示 除了 第 一 子 元 素 之 外 的 元 素 。 注 意 ， 这 个 选择 器 只 能 用 于 修饰 伪 类 选择 器 ， 其 他 都 不 行 。 比 如 : not (h3) ，: not (: : first-letter) 都 是 
无 效 的 选择 器 。 


伪 元 素 选择 器 : : : pseudoName， 用 来 表示 一 些 虚 拟 的 元 素 。 也 可 以 写作 : pseudoName (一 个 冒号 的 ) ， 后 者 是 为 了 兼容 老式 浏览 器 而 保留 的 ， 比 如 IE8。 常 用 的 有 : 


: : before: 当前 元 素 内 容 的 前 面 。 如 果 定 义 了 : : before 样 式 ， 在 Chrome 中 审查 元 素 时， 会 在 这 个 元 素 的 内 部 看 到 一 个 名 叫 : : before 的 虚拟 节点 ， 可 以 选中 它 查 看 样式 。 注 意 : 它 庶 在 当前 元 素 
的 里 面 而 不 是 平 级 。 


: : after: 当前 元 素 内 容 的 后 法 同 : : before; 


对 


: : first-letter: 当前 元 素 的 第 一 个 字母 。 这 可 以 用 来 实现 首 字母 下 沉 效果 。 注 意 : 没有 : : last-letter 选 择 器 。 


: : first-line: 当前 元 素 内 容 的 第 一 行 。 注 意 : 自动 折 行 出 来 的 内 容 算 第 二 行 。 注 意 : 没有 : : last-line 选 择 器 。 


组 合 选择 器 : 通过 一 定 规则 组 合 起 来 的 多 个 选择 器 ， 接 下 来 会 详细 讲 组 合 的 规则 。 


A.2.2 ”选择 器 组 合 规则 


组 合 规则 适用 于 任何 类 型 的 选择 器 ， 下 面 的 例子 中 不 再 特别 体现 这 一 点 : 


“ 组 合 规则 可 以 级 联 成 任意 多 级 ; 


“ 连 写 表示 同时 满足 多 个 选择 器 ， 如 : 

“ div.classA 表 示 具 有 classA 的 div 元 素 ; 

“ .ClassA.classB 表 示 元 素 同时 具有 classA 和 classB 两 个 类 ; 

.classA: first-child 表 示 元 素 具有 classA 类 ， 同 时 它 还 是 父 元 素 的 第 一 个 元 素 ， 注 意 ; 它 不 是 用 来 表示 父 元 素 中 的 第 一 个 具有 ,classA 的 元 素 。 
- 用 大 于 号 (>) 匹配 直接 上 下 级 关系 ， 如 div>a 匹 配 <div><a href=-"#"> 链 接 </a></div>， 但 不 匹配 <div><h3><a hre 伍 "#'> 链 接 </a></h3></div>; 
“ 用 空格 分 隔 表 示 任 意 层 的 上 下 级 关系 ， 如 div a 匹配 <div><a href="#"> 链 接 </a></div> 或 <div><h3><ahref="#"> 链 接 </a></h3></div>; 


' 用 加 号 (+) 表示 相 邻 兄弟 关系 ， 如 .classA+.classB 匹 配 <div class="classA"></div><h3 class="classB"></h3> 中 的 .classB 元 素 ， 但 不 匹配 <div class="classA"></div><h3></h3><div class="classB"> 


</div> 中 的 .classB 元 素 ; 


' 用 波浪 号 (~) 表示 任意 兄弟 关系 ， 如 .classA~.classB 匹 配 <div class="classA"></div><h3 class="classB"></h3> 或 <div class="classA"></div><hr/><divclass="classB"></div> 中 的 .classB 元 素 。 


A.2.3 ” 层 赤 规则 


CSS 全 称 为 层 坪 样式 表 ， 就 是 因为 它 遵循 层 二 规则 。 简 单 地 说 ， 就 是 样式 是 具有 优先 级 的 ， 高 优先 级 的 样式 会 “ 庶 住 ” 低 优 先 级 的 样式 ， 这 样 层 层 革 加 ， 就 得 出 了 最 终 的 样式 。 


以 如 下 结构 为 例 : 


<div class="levell"> 

<h3 class="level2"> 

<span class="level3">1213</span> 
</h3> 

<h3 class="level2"> 

<span class="level3">1223</span> 
</h3> 

<span class="level2"> 

12 

</span> 

</div> 


总 体 的 设计 原则 是 : 


“ 媒 套 关系 上 越 接近 当前 元 素 的 选择 器 ， 其 优先 级 越 高 (在 元 素 的 style 必 性 中 定义 的 样式 ， 与 当前 元 素 的 接近 度 最 高 ) 。 
“ 接近 度 相 同时 ， 遵 循 ID> 类 、 擅 类 、 属 性 选择 器 > 元 素 的 优先 级 。 因 为 元 素 选择 器 通常 是 泛 指 ， 而 id 可 以 指定 一 个 单独 的 节点 ， 类 和 属性 则 介 于 两 者 之 间 。 
“ 类 型 相同 时 ， 越 是 后 定义 的 选择 器 ， 其 优先 级 越 高 。 


“ 对 于 组 合 选择 器 ， 逐 层 比 较 ， 当 前 元 素 相 同时 就 会 去 比较 父 选 择 器 。 


但 要 注意 : 如 果 div 和 h3 是 紧邻 的 上 下 级 元 素 ， 那 么 大 于 号 (> ) 和 空格 的 优先 级 相同 ， 如 div>h3 和 div h3 的 优先 级 相同 ，+ 和 ~ 之 间 也 是 如 此 。 指 定 了 上 一 层 的 选择 器 优先 于 只 指定 了 当前 层 的 ， 如 
div>h3>span 优 先 于 span。 但 要 注意 ， 它 落后 于 .level2， 这 是 因为 span 和 .level2 的 接近 度 相 同 ， 而 类 选择 器 .level2 优 先 于 元 素 选 择 器 span， 一 旦 这 一 步 就 已 经 能 看 出 差别 ， 浏 览 器 就 不 会 继续 往 父 级 比较 
了 


带 有 ! important (直译 为 “重要 ”) 的 样式 ， 优 先 级 总 是 大 于 不 带 的 ; 双方 都 带 时 ， 等 同 于 都 不 带 时 的 比较 规则 ， 但 在 项 目 实践 中 ， 请 谨慎 使 用 。 


实战 中 ， 如 果 怀 疑 是 覆盖 规则 出 现 了 问题 ， 可 以 打开 Chrome 的 “审查 元 素 ” 界面， 选中 想 查 看 的 元 素 ， 它 的 样式 区 会 列 出 所 有 生效 的 样式 ， 其 中 优先 级 最 高 的 选择 器 出 现在 最 上 方 。 而 那些 被 覆盖 的 
样式 会 显示 为 带 删除 线 的 格式 ， 如 图 A-1 所 示 。 


Styles Computed Event Listeners DO 


element. style 1 
} 


div > h3 > .level3 { 
color: 国 red; 
} 


div .Level3 { 
Et 和 7— 国 BtHer 


level3 1 


izing: border-box; 


A-1 带 删除 线 的 格式 


如 果 发 现 更 高 优先 级 的 选择 器 中 定义 的 样式 也 加 上 了 删除 线 ， 那 么 可 以 看 看 低 优先 级 选择 器 的 样式 中 是 否 包 含 了 ! important 标 记 。 


A.2.4 盒子 模型 


每 一 个 元 素 都 有 它 的 “盒子 ”， 这 个 盒子 由 四 个 部 分 组 成 ， 从 外 到 内 依次 是 : margin，border，padding，width/height。 如 图 A-2 所 示 。 


border 1 


padding10 


图 A-2 ”金子 模型 
它 所 对 应 的 CSS 定 义 是 : 


div { 
margin: 10px 20px; 
padding: 10px 20px Spx 15px; 
border-width: lpx; 
border-color: black; 
border-style: solid; 


注意 ，10px 20px 5px 15px 的 形式 是 从 上 方 开始 顺 时 针 定 义 的 ， 也 就 是 依次 定义 “上 右 下 左 ”的 距离 。 可 以 从 后 往 前 逐个 省 略 ， 也 就 是 说 : 如 果 没 有 定义 “下 ”， 则 默认 它 等 于 “上 ”的 距离 ; 如 果 没 
有 定义 “下 左 ”， 则 默认 它们 等 于 “上 右 ” 的 距离 , 如 margin; 如 果 没 有 定义 “ 右 下 左 ”， 则 默认 它们 等 于 “上 ”的 距离 ， 如 border-width。 


A.2.5 “元 素 布局 模式 


这 是 一 个 起 源 于 HTML 中 的 概念 ， 所 描述 的 是 一 个 元 素 在 父 元 素 内 部 的 布局 模式 。 其 中 : 
“ 块 元 素 : 如 div， 它 会 尝试 占据 父 元 素 中 的 一 整 行 。 如 果 你 指定 了 它 的 宽度 ， 那 么 它 的 显示 宽度 会 改变 ， 但 是 仍然 会 占据 整 行 ， 没 有 内 容 的 部 分 则 会 保持 空白 。 


“ 行内 元 素 : 如 span， 它 没有 宽度 和 高 度 的 概念 ， 我 们 也 没 办 法 给 它们 指定 宽度 和 高 度 。 这 类 元 素 实 际 上 没有 任何 表现 ， 就 像 它 只 是 用 来 标记 出 一 个 区 间 (span) 一 样 。 


“ 行内 块 元 素 : 如 img， 它 可 以 指定 宽度 和 高 度 ， 而 且 它 在 布局 时 只 会 占据 这 个 “宽度 * 高 度 ” 的 空间 。 它 可 以 和 文字 混 排 ， 事 实 上 ， 我 们 可 以 把 行内 块 元 素 视 为 一 个 文字 。 


最 开始 的 时 候 ， 每 种 元 素 都 有 一 种 固定 的 布局 模式 。 后 来 ，CSS 从 HTML 中 分 离 出 来 ， 于 是 我 们 拥有 了 重新 定义 元 素 布局 模式 的 能 力 ， 比 如 我 们 可 以 通过 display: inline 把 div 重 定义 为 行内 元 素 ， 或 者 
通过 display: inline-block 把 span 重 定义 为 块 元 素 。 


当然 ， 这 并 不 意味 着 我 们 可 以 随意 的 去 重 定义 这 些 元 素 。 我 们 写 HTML 时 ， 应 该 首先 根据 其 固有 语义 来 决定 使 用 哪 种 元 素 。 比 如 ， 用 来 表示 一 个 横向 的 菜单 ， 我 们 可 以 定义 一 系列 的 Span ， 然 后 通过 css 
把 它们 改 成 display: inline-block， 但 更 好 的 方式 是 ， 我 们 定义 这 样 一 个 结构 : 


<ul class="menu-horizontal"> 
<11><a href="#file"> 文 件 </a></1i> 
<1i><a href="#edit"> 编 辑 </a></1i> 
</ul> 


在 HTML 的 自然 语义 中 ，ul 表 示 一 个 无 序列 表 ，li 束 示 列 表 中 的 一 个 条 目 ，a 则 表示 一 个 可 以 点 进去 的 链接 一 一 而 这 正好 符合 菜 和 


我 们 期 望 的 效果 。 


a 的 自然 语义 。 在 此 基础 上 ， 我 们 可 以 通过 对 ul、| 主 0a 元 素 的 CSS 定 制 达到 


除了 block，inline，inline-block 之 外 ，display 的 取 值 还 包括 一 系列 的 表格 方式 。 如 table，table-row，table-cell 等 ， 分 别 对 应 于 table、tr、td/th 元 素 的 默认 显示 方式 。 它 们 可 以 把 任意 元 素 改造 成 


表格 式 布局 ， 如 bootstrap 中 的 input-group 就 是 用 这 种 形式 实现 的 。 


A.2.6 定位 


position 分 为 四 种 : 
“ static: 默认 值 。 元 素 遵循 普通 的 流 式 规则 进行 排版 。 


relative: 相对 定位 。 它 本 身 的 视觉 效果 和 static 一 样 ， 但 是 它 可 以 作为 绝对 定位 型 元 素 的 基准 点 。 


' absolute: 绝对 定位 。 元 素 不 参与 普通 的 页 面 排版 ， 而 是 相对 于 它 的 父 元 素 中 最 近 的 position 为 positioned ( 非 static) 元 素 进行 定位 。 如 果 没有 找到 ， 则 相对 于 body 元 素 进行 定位 。 


“fixed: 国定 定位 。 元 素 不 参与 普通 的 页 面 排版 ， 而 是 相对 于 浏览 器 的 可 见 内 容 区 进行 定位 。 无 论 内 容 区 有 多 大 ， 如 何 滚动 ， 它 都 像 固定 在 那个 位 置 一 样 。 


当 使 用 absolute 和 fixed 方 式 时 ， 多 个 元 素 可 能 重 赤 在 同一 个 位 置 ， 这 时 候 我 们 需要 一 种 方式 来 决定 该 把 谁 显 示 在 前 面 。 默 认 情况 下 ， 后 


以 使 用 z-index 样 式 ， 顾 名 思 义 ， 是 z 轴 上 的 序号 。 我 们 的 屏幕 是 平面 的 ， 可 以 用 x 轴 和 y 轴 表示 ， 而 元 素 相互 覆盖 时 ， 就 仿佛 有 一 个 垂 


作为 原点 ， 那 么 离 我 们 越 远 的 元 素 ， 其 z-index 越 小 。 


明 的 元 素 会 盖 住 先 声明 的 元 素 。 如 果 要 改变 这 种 顺序 ， 我 们 可 


直 于 屏幕 的 轴 ， 也 就 是 z 轴 ， 离 我 们 近 的 会 遮 住 离 我 们 远 的 。 如 果 以 屏幕 


但 是 要 注意 ， 如 果 两 个 兄弟 元 素 都 指定 了 z-index， 元 素 A 的 较 大 ， 元 素 B 的 较 小 ， 而 较 小 的 元 素 B 内 部 包含 了 另 一 个 元 素 C， 那 么 无 论 元 素 C 的 z-index 多 大 ， 它 都 不 会 遮 住 元 素 A。 


A.2.7 浮动 


除了 可 以 通过 定位 方式 来 改变 元 素 的 位 置 以 外 ， 还 可 以 通过 浮动 来 改变 。 但 要 注意 ， 浮 动 影响 到 的 只 是 行内 元 素 、 行 内 块 元 素 等 跟随 文字 进行 排版 的 元 素 ， 对 块 元 素 是 没有 影响 的 。 因 为 浏览 器 会 对 直 


接 给 块 元 素 保留 整 行 空间 ， 但 给 行内 元 素 保留 空间 的 时 候 会 先 扣 除 预 留 给 浮动 元 素 的 位 置 。 


浮动 还 有 一 些 比较 复杂 的 用 法 ， 这 里 不 展开 了 ， 有 兴趣 的 可 以 看 MDN。 


A.2.8 ”继承 规则 


有 些 元 素 的 样式 是 可 以 被 子 元 素 继承 的 ， 而 男 一 些 则 不 行 。 在 CSS 标 准 中 ， 每 个 样式 都 定义 了 是 否 允 许 继承 的 ， 不 过 我 们 没 必要 去 硬 背 标准 ， 因 为 这 些 “ 是 否 允 许 继承 ”的 设 定 都 是 符合 直觉 的 。 比 


如 : 


涉及 定位 、 浮 动 、 盒 子 模型 、 背 景 等 方面 的 样式 是 不 能 继承 的 。 我 们 从 直觉 上 也 能 知道 继承 它们 没有 意义 ， 否 则 稍微 改动 一 下 body 的 衬 距 ， 整 个 页 面 的 总 大 小 就 可 能 增 大 N 倍 衬 距 。 


涉及 文字 的 样式 是 可 以 继承 的 ， 如 字体 、 字 号 、 颜 色 、 对 齐 方式 。 我 们 从 直觉 上 也 能 判断 出 它们 应 该 被 继承 ， 否 则 一 旦 我 们 在 中 间 插 入 一 


继承 规则 很 少 有 违反 直觉 的 地 方 ， 如 果 发 现 没有 达到 预期 效果 ， 可 以 去 Chrome 审 查 元 素 中 的 Computed 页 看 看 覆盖 关系 ， 如 


A-3 所 示 。 


层 DOM 节 点 ， 那 么 原 有 的 文字 风格 就 全 变 了 。 
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Show inherited properties 


bP box=5izing: border=box; 
Tcolor: 男 rgb(@, 128, 128); 
atn = teal 


bootstr 


display: inline; 
b font=family: Menlo, Monaco, Consolas, "Courier 
New', moNnospace; 

b font=size: 13px; 

height: Buto: 

FE line=height: 18.5714302062988px; 
b white=space: pre=wrap:; 

Width: auto; 

b word=wrap: break=word; 


A.2.9 响应 式 布局 


响应 式 布局 是 CSS 一 个 更 大 特性 的 一 部 分 ， 这 个 特性 叫 作 “媒体 查询 ”。 这 个 特性 允许 针对 不 同 特性 的 设备 写 出 不 同 的 样式 。 比 如 有 些 Logo 希 望 用 户 在 屏幕 上 看 到 ， 但 是 不 希望 在 打印 时 打印 出 来 ， 那 
么 就 可 以 通过 如 下 代码 实现 : 


@media print { 
display: none; 


} 


让 它 在 打印 时 隐藏 掉 。 我 们 还 可 以 针对 更 多 种 设备 编写 CSS， 普 通 屏幕 的 设备 名 叫 screen， 而 数字 电视 的 设备 名 叫 ty， 还 有 很 多 种 其 他 设备 。 


在 实战 中 ， 比 判断 设备 更 常用 的 特性 是 判断 分 辨 率 。 比 如 在 Bootstrap 3 中 ，col-md-* 的 尺寸 控制 就 是 通过 分 辩 率 查询 来 实现 的 。 


这 是 Bootstrap 3 支持 响应 式 布局 的 主要 方式 ， 用 好 它 可 以 随 着 屏幕 分 辨 率 的 不 同 自动 调整 布局 ， 而 不 用 增加 太 多 工作 量 。 


还 可 以 判断 很 多 其 他 特性 ， 比 如 屏幕 横 宽 比 、 色 深 、 横 向 还 是 纵向 等 。 


A.2.10 ”使 用 技巧 


1. 块 元 素 水 平 居中 


指定 width， 然 后 指定 margin-left: auto; margin-right: auto; ， 这 时 候 元 素 会 占据 width 中 指定 的 宽度 ， 剩 余 的 空间 则 平分 给 左右 边 距 ， 于 是 我 们 实现 了 让 元 素 水 平 居中 的 效果 。 


2. 元 素 垂 直 居中 


元 素 垂直 居中 的 效果 实现 方式 比较 多 ， 最 容易 的 方式 是 表格 方式 ， 也 就 是 我 们 把 当前 元 素 的 父 元 素 设置 为 display: table-cell， 然 后 把 它 的 垂直 对 齐 方式 设置 为 vertical-align: middle， 这 时 候 它 的 内 
容 就 全 部 垂直 居中 了 。 


更 高 级 但 兼容 性 也 更 差 的 方案 是 CSS3 中 新 定义 的 “CSSs 弹 性 盒 ”， 它 除了 可 以 简单 地 实现 垂直 居中 之 外 ， 还 可 以 随 着 大 小 的 变化 自动 调整 子 元 素 的 布局 。 如 果 想 进一步 研究 ， 请 参见 MDN 中 “CSS 开发 
者 指南 ”下 的 “使 用 CSS 弹 性 盒 ”。 


3 . 超 长 内 容 自动 显示 省 略 号 


在 文本 列表 、 缩 略图 等 设计 元 素 中 ， 有 时 候 文 本 的 长 度 是 不 可 控制 的 ， 而 我 们 又 不 希望 它 自动 折 行 ， 这 时 候 ， 我 们 可 能 会 希望 浏览 器 把 超 长 的 文本 变 成 省 略 号 。 传 统 方式 是 让 后 端 或 前 端 JavaScript 直 
接 把 它 裁剪 到 特定 长 度 ， 但 是 这 种 方式 只 能 写 死 字符 数 ， 排 版 、 字 号 等 变化 时 ， 不 能 忘 了 更 新 这 个 字符 数 ， 这 样 显 然 是 非常 笨拙 的 。 而 CSs 则 提供 了 另 一 种 更 好 地 选择 : 


Span { 
text-overflow: ellipsis; /* 溢出 的 文本 变 成 省 略 号 */ 
overflow: hidden; /* 不 显示 溢出 的 部 分 */ 
width: 10em; /* 最 多 10 字 符 宽 */ 
display: inline-block;  /* 显示 为 行内 块 才能 指定 宽度 */ 


} 


只 有 这 几 个 样式 同时 起 作用 的 时 候 ， 自 动 省 略 才 会 生效 。 


但 是 还 有 另 一 个 问题 ， 如 果 人 允许 文本 折 行 ， 那 么 它 就 会 优先 选择 折 行 。 我 们 需要 禁止 它 自动 折 行 ， 这 时 可 以 用 另 一 个 样式 white-space: nowrap， 虽 然 它 名 字 是 white-space， 但 对 于 汉字 也 是 有 效 


如 果 把 它们 应 用 到 span 等 行内 元 素 上 ， 你 会 发 现 它 仍然 无 效 ， 这 是 因为 行内 元 素 无 所 谓 宽度 的 概念 ， 所 以 浏览 器 也 就 不 知道 该 在 哪里 折 行 了 。 为 了 解决 这 个 问题 ， 我 们 可 以 再 把 这 个 元 素 的 布局 模式 改 
为 带宽 度 的 块 元 素 或 行内 块 元 素 , 如: display: inline-block。 


4. 用 : not 代 蔡 层 竺 规则 做 特例 处 理 


当 设 计 页 面 的 时 候 ， 我 们 可 能 会 遇 到 这 样 的 需求 : 表格 中 每 一 行 的 所 有 单元 格 都 显示 右 侧 框 线 ， 但 是 最 后 一 个 不 要 显示 。 


常规 的 特例 处 理 方式 是 先 定 义 “ 常 例 规则 ”， 也 就 是 “所 有 单元 格 都 显示 右 侧 框 线 ”， 然 后 定义 “特例 规则 ”， 也 就 是 “最 后 一 个 不 要 显示 右 侧 框 线 ”， 这 样 我 们 得 出 了 这 样 一 个 样式 表 : 


td 1{ 
border-right: lpx solid lightgray; 


} 
td:last-child { 
border-right: none; 


它 的 实现 原理 是 : 当 应 用 到 最 后 一 个 单元 格 时 ， 后 者 的 优先 级 更 高 ， 所 以 会 覆盖 前 面 定义 的 样式 。 


但 是 这 样 仍然 不 够 简明 ， 我 们 可 以 用 : not 来 更 加 简明 的 实现 它 : 


td:not (:last-child) { 
border-right: lpx solid lightgray; 
} 


当然 ， 这 两 者 并 非 完 全 等 价 ， 最 主要 的 区 别 是 如 果 还 有 其 他 规则 定义 了 td 的 边框 ， 那 么 后 者 不 会 在 最 后 一 个 单元 格 上 覆盖 它 ， 但 大 多 数 情况 下 ， 这 已 经 足够 了 。 


有 良好 设计 的 CSs 框 架 ， 一 般 不 会 让 每 个 元 素 上 赤 加 很 多 层 规则 ， 免 得 增加 复杂 度 。 通 过 : not 伪 类 选择 器 ,我 们 可 以 让 CSS 框 架 更 加 简明 。 


A.2.11 原则 : 如 何 设计 可 维护 的 CSs 框 架 


1. 恰 当 命名 


一 个 可 维护 的 CSS 框 架 ， 在 命名 上 是 非常 讲究 的 ， 比 如 Bootstrap、btn-danger 这 样 具有 业务 含义 的 名 称 ， 远 胜 于 btn-red 这 样 的 纯 面向 外 观 的 名 称 。 


2. 避 免 特例 处 理 


“特例 处 理 ” 是 CSs 框 架 难以 维护 的 根源 ， 合 理 的 设计 各 个 赤 加 层 是 避免 特例 处 理 的 关键 。 就 像 编程 时 要 划分 不 同 抽象 层级 一 样 ， 我 们 先 用 一 些 适用 范围 最 广 的 规则 把 整体 外 观 搭 起 来 ， 然 后 定义 出 
panel 等 常用 组 件 ， 再 定义 出 panel-danger 等 具有 业务 含义 的 组 件 ， 最 后 才 去 定义 某 些 与 众 不 同 的 panel-danger 外 观 。 最 后 这 步 我 称 之 为 特例 处 理 。 减 少 特例 处 理 ， 可 以 减 小 工作 量 ， 利 于 分 工 ， 更 重要 的 
是 它 有 助 于 维护 一 个 统一 的 外 观 风格 。 


性 


3. 避 免 使 用 style 属 


HTML 是 一 个 文档 ， 它 本 身 不 应 该 具有 样式 ， 样 式 是 CSS 的 工作 。 而 style 就 是 在 HTML 中 定义 的 样式 。 使 用 style 容 易 将 样式 分 散 的 到 处 都 是 ， 而 且 会 让 CSS 中 的 样式 被 覆盖 ， 破 坏 统一 的 外 观 风 格 。 所 
以 ，style 最 多 只 能 用 在 某 些 Quickfix， 必 须 尽早 重 构 掉 。 


4. 避 免 强制 指定 元 素 的 宽度 、 高 度 


我 在 前 面 的 “盒子 模型 ”中 讲 过 ， 一 个 元 素 最 终 占据 的 空间 由 “内 容 区 、padding、border、margin” 这 几 个 部 分 共同 组 成 ， 而 子 元 素 占用 的 空间 共同 构成 了 父 元 素 的 “内 容 区 ”。 最 终 ， 内 容 区 的 大 
小 是 由 其 中 的 文本 等 简单 元 素来 决定 的 ， 这 些 尺 寸 累积 起 来 构成 了 页 面 的 最 终 布 局 。 


所 以 ， 元 素 的 宽度 和 高 度 通常 是 没 必要 强制 指定 的 ， 特 别 是 高 度 。 我 们 应 该 指定 的 是 : 字号 、 行 高 、padding、border、margin。 这 样 ， 当 内 容 变 化 的 时 候 ， 其 父 节点 的 宽 高 会 自动 重新 调整 ， 我 们 的 
页 面 就 具有 了 “弹性 ”， 大 多 数 内 容 删 减 都 不 需要 你 去 修改 CSS， 而 如 果 强 制 指定 了 宽 高 ， 就 很 难 避 免 这 些 性 价 比 很 低 的 工作 量 了 。 


A.2.12 ”常见 的 坑 


1. 非 块 元 素 不 允许 包含 块 元 素 


严格 的 说 ， 这 不 是 CSS 的 坑 ， 而 是 HTML 的 坑 。 因 为 HTML 中 规定 了 严格 的 谋 套 模式 ， 除 了 table、ul 等 的 谋 套 规则 限制 外 ， 一 个 鲜 为 人 知 的 限制 是 非 块 元 素 不 能 包含 块 元 素 ， 比 如 <span> <div> </div> 
</span> 是 个 错误 的 嵌 套 。 对 于 违反 谋 套 模式 的 HTML 结 构 ， 不 同 的 浏览 器 处 理 时 差异 很 大 ， 有 的 会 自动 补 齐 ， 有 的 则 会 直接 忽略 ， 所 以 如 果 要 写 出 兼容 性 良好 的 页 面 ， 请 务必 严格 遵循 HTML 的 湾 套 规 
则 。 


2. 指 定 width: 100% 后 父 元 素 出 现 滚动 条 


这 通常 是 由 于 当前 元 素 具 有 padding、border 或 margin 导 致 的 。 在 前 面 的 “盒子 模型 ”中 ， 


有 空间 留 给 padding、border 和 和 margin 了， 


是 当前 元 素 相对 父 元 素 超 宽 ， 父 元 素 ; 


后 记 


我 们 看 到 width 是 指 内 容 区 的 宽度 ， 而 如 果 一 个 元 素 的 内 容 区 宽度 正好 等 于 父 元 素 的 内 容 区 宽度 ， 那 么 就 没 


也 就 不 得 不 显示 滚动 条 了 。 


主 主 
匡 


提问 的 


把 这 篇 文章 放 在 最 后 ， 绝 不 是 


为 它 不 重 


， 相 反 ， 最 后 一 课 往往 是 最 重 


的 。 这 本 书 F 


17 年 前 ,我 成 为 软件 工程 师 ， 但 直到 12 
今 ， 这 篇 文章 已 经 被 译 成 了 17 国 文字 。 


前 我 才 敢 


虽然 原作 者 放弃 了 版 权 ， 但 我 不 会 原文 摘 引 ， 而 是 结合 过 去 的 经 历 谈 谈 我 的 体会 。 


好 ， 也 只 能 帮 你 一 时 ， 而 这 篇 文章 将 帮 你 一 世 


不 限于 Angular、 不 限于 编程 ， 甚 至 不 限于 软件 领域 。 


认为 “真正 的 软件 工程 师 ”一 一 那 时 候 ， 我 看 到 了 一 篇 文章 《提问 的 智慧 》。 其 原作 者 是 国外 的 两 位 著名 黑客 Eric S.Raymond 和 Rick Moen。 如 


想 看 原文 的 请 到 这 里 : https://github.com/FredWe/How-To-Ask-Questions-The-Smart-Way/blob/master/README-zh_CN.md。 原 文 很 尖锐 ， 做 好 心理 准备 之 前 还 是 先 看 我 这 篇 吧 ， 虽 然 也 温 


柔 不 了 多 少 .…… 


什么 是 黑客 ? 


黑客 一 词 已 经 被 


烂 了 。 在 电影 中 ， 黑 客 常常 被 塑造 成 追求 
喜欢 解决 别人 解决 不 了 的 问题 ， 做 自己 喜欢 的 


黑客 喜欢 帮助 新 手 ， 但 懒汉 除外 ! 


每 一 个 黑客 都 是 从 新 手 成 长 来 的 ， 特 别 是 在 开源 文化 大 行 于 世 的 时 代 。 真 正 的 遇 


但 黑客 讨 大 懒汉， 这 种 懒汉 不 是 指 连 租 个 


这 样 的 人 改变 不 了 世界 ,黑客 也 不 愿意 在 他 身上 浪费 时 间 。 任 何人 ， 一 旦 被 中 


记 住 : 自助 者 天 助 之 。 黑 客 只 会 喜欢 有 上 进 心 的 新 手 。 


十 秒 钟 就 能 解决 的 问题 ， 要 花 十 分 钟 问 清楚 ? 我 不 干 ! 


记 住 ,黑客 可 不 是 整 天 无 所 事 对 


他 们 上 网 查看 问题 ， 是 因为 寻找 挑战 和 提升 水 平 的 机 会 。 所 以 ， 描 述 清楚 问题 是 吸引 办 
吗 ? 黑客 更 是 如 此 。 就 算 帮 你 解决 了 ， 你 也 离 他 的 黑 名 


黑客 : “ 搜 ‘ionic ! 


， 游 手 好 闲 的 人 。 他 们 可 能 是 开源 运动 的 领袖 ， 可 能 


自由 、 技 术 高 超 但 愤世嫉俗 的 形象 ， 甚 至 有 时 候 还 被 当做 高 科技 小 偷 儿 或 侠盗 。 其 实在 我 看 来 ， 黑 客 就 是 个 “技术 极 客 ”: 
有 ， 顺 手 改变 世界 。 这 就 是 我 心中 的 黑客 精神 。 


虹 客 不 会 排斥 新 手 ， 


客 认定 是 这 样 的 “懒汉 ”， 必 将 成 为 他 黑 名 


喜欢 迎接 挑战 、 


因为 每 个 新 手 都 可 能 是 他 们 “顺手 改变 世界 ”的 机 遇 。 


大 数据 技术 作 分 析 的 那 种 黑客 型 “ 懒 ” 人 ， 而 是 指 懒 于 把 问题 说 清楚 ， 却 想 让 黑客 扮演 上 帝 或 奶妈 的 那 种 懒汉 。 


中 的 一 员 。 


不 远 了 。 


在 Google 时 代 ， 很 多 问题 不 是 没 法 解决 ， 而 是 不 知道 关键 字 ， 黑 客 更 是 深 说 此 道 。 真 正 的 中 


当 黑 客 告诉 你 “ 搜 x x x” 的 时 候 ， 别 以 为 这 位 不 而 
的 特征 之 一 就 是 会 举 一 


单 不 远 了 。“ 上 进 的 新 手 ” 


什么 样 的 问题 是 好 问题 ? 


如 果 觉 得 


酒 


客 已 经 了 解 此 问题 的 背景 知识 (比如 他 知道 你 在 使 


反 三 


“ 描述 出 现 的 错误 (包括 但 不 限于 外 观 异 常 、 错 误 日 志 、 控 制 台 输出 等 ) 。 


“ 描述 你 的 预期 结果 。 


“ 描述 你 已 经 尝试 过 的 失败 。 


“ 描述 你 查 过 的 关键 字 。 


并 且 ， 要 注意 第 一 时 间 回 答 黑客 的 提问 ， 不 要 


如 果 你 认为 黑客 没有 足够 的 背景 知识 ， 那 么 先 


解释 。 


自己 一 个 劲 地 说 个 不 停 。 


尽量 简短 的 语言 描述 下 背景 (比如 正在 使 


另外 ， 先 了 解 一 下 所 在 的 场合 也 是 必要 的 ， 在 Ruby 论 坛 问 C+ + 问题 或 反之 ， 基 本 上 都 属于 


"“ 活 问题 ” 胜 过 “ 死 问题 “ 


大 公司 的 技术 骨干 ， 可 能 是 小 公司 的 CTO， 也 可 能 正 是 你 顶头 上 司 的 马甲 一 一 大 多 数 新 手 都 没 他 们 忙 。 


客 注意 的 第 一 步 。 想 想 看 ， 一 个 本 来 十 秒 钟 就 能 解决 的 问题 ， 却 要 花 十 分 钟 把 问题 问 清楚 ， 你 还 会 有 兴趣 去 解决 


客 不 会 把 什么 都 记 在 脑子 里 ， 作 为 极 客 ， 他 们 会 尽 可 能 把 属性 点 加 到 CPU 和 软件 上 ， 而 不 是 内 存 里 。 所 以 ， 


| 烦 的 黑客 在 歧视 新 手 或 者 不 负责 任 ， 这 是 在 教 你 打 鱼 的 技术 ， 比 答案 可 珍贵 多 了 ! 当然 ， 等 到 他 对 你 连 说 十 次 搜 同一 个 关键 字 的 时 候 ， 你 已 经 离 他 的 黑 名 


什么 框架 和 语言 ) ， 那 么 请 节省 时 间 ， 直 入 主题 : 


某 个 生僻 的 框架 ) ， 问 问 对 方 是 否 对 此 感 兴趣 ， 然 后 再 描述 问题 ， 并 且 在 必要 时 对 生僻 框架 的 某 些 特性 加 以 


“ 自 找 抽 ” 的 行为 。 


所 谓 “ 活 问题 ”， 是 指 能 让 对 方 直接 开始 调试 的 问题 ; 而 “ 死 问题 ”是 指 对 方 要 通过 一 系列 操作 搭建 完 环境 才能 进行 调试 的 问题 。 


在 前 端 编程 的 领域 中 ，jsbin.com，jsfiddle.net，codepen.io 等 网 站 就 是 提出 “ 活 问 题 ” 的 首选 方式 。 在 上 面 做 一 个 能 重 现 问题 的 最 小 化 工程 ， 然 后 分 享 给 对 方 ， 可 以 大 大 提高 解决 问题 的 效率 ， 更 会 
给 人 留 下 “这 是 个 聪明 勤快 又 专业 的 新 手 ” 的 印象 。 


不 要 问 “ 有 人 懂 xxx 吗 ?“ 


特别 是 在 QQ 群 里 常 有 人 犯 这 样 的 错误 ， 自 觉 很 礼 狐 ， 还 怪 别人 不 理 他 。 事 实 上 ， 有 几 个 人 敢 说 自己 “ 懂 汉 语 ” 呢 ?”“ 懂 ”在 口语 中 是 一 个 很 难 界定 的 词 。 改 为 “有 人 用 过 x x x 吗 ? ”就 会 好 一 些 。 


不 过 更 好 地 方式 是 直接 用 尽量 简短 的 语言 描述 清楚 你 的 问题 ， 这 样 ， 即 使 是 没 用 过 x x x 的 黑客 ， 也 可 能 凭 经 验 从 你 描述 的 问题 中 看 出 你 钻 了 哪个 牛角 尖 。 


“ 急 急 急 ” 是 你 的 事 ， 不 是 黑客 的 ， 对 这 样 的 标题 他 们 只 会 吴 之 以 鼻 。 如 果真 的 “ 急 急 急 ”， 就 多 花 些 时 间 用 尽 可 能 简短 的 标题 描述 清楚 问题 ， 吸 引 黑 客 的 注意 力 。“ 看 起 来 这 是 个 又 聪明 又 认真 的 小 
子 ， 问 题 也 有 趣 ， 值 得 帮 他 一 把 ”。 


在 提问 中 出 现 错别字 ， 除 了 少数 非 母 语 用 户外 ， 往 往 意味 着 提问 者 不 认真 。 对 于 一 个 连 对 自己 提 的 问题 都 不 认真 的 “懒汉 新 手 ”， 黑 客 可 没 兴趣 去 顺便 给 你 当 一 下 语文 老师。 当然 ， 非 母语 用 户 也 不 
特别 担心 ， 对 非 母 语 用 户 和 错别字 用 户 ， 还 是 挺 容易 区 分 出 来 的 。 


公共 论坛 中 尽量 不 要 “ 密 ”版 主 或 个 人 


在 论坛 或 QQ 群 中， 除非 和 对 方 非常 熟悉 ， 否 则 “ 密 个 人 (给 个 人 发 私信 ) ”是 不 礼 狐 的 。 


首先 ， 你 的 问题 对 方 不 一 定 是 专家 ， 特 别 是 版 主 ， 有 很 多 都 是 做 日 常 管理 的 ， 你 的 问题 很 可 能 石沉大海 ， 而 对 方 也 可 能 为 没 能 力 答复 你 而 难过 。 


其 次 ， 你 不 知道 对 方正 在 干什么 ， 是 不 是 很 忙碌 。 很 多 人 会 把 QQ 群 的 消息 提醒 功能 关 掉 ， 就 是 为 了 不 被 陌生 人 打扰 ， 而 私 聊 是 很 难 提前 屏蔽 的 一 一 除非 加 黑 名 单 。 


最 后 ， 如 果 你 确实 很 急 ， 那 么 在 密 的 时 候 请 直接 在 同一 个 消息 中 描述 清楚 问题 ， 不 要 问 “ 在 吗 ? ”之 类 的 ， 更 不 要 边 打 边 发 ，“ 哈 哈 喷 ”不 停 的 弹 窗 。 如 果 对 方 不 回复 ， 要 明白 他 必然 有 他 的 理由 ， 不 
重复 发 或 发 震动 ， 否 则 进 了 黑 名 单 不 能 怪 别人 。 


不 要 放 地 图 炮 


网 


如 果 一 个 问题 没 人 理 ， 就 多 找 找 自 己 的 原因 ， 改 进 一 下 提问 方式 。 如 果 社 区 中 真 的 没有 热心 人 ， 那 这 个 社区 是 怎么 建立 和 维持 的 ?如 果 动 纯 就 放 地 图 炮 群 嘲 ， 那 么 不 但 会 被 踢 出 这 个 社区 ， 在 其 他 社 
也 可 能 被 踢 ， 大 多 数 人 的 影响 力 可 不 是 只 限于 一 个 社区 的 。 


如 果 对 方 帮 你 查 过 此 问题 ， 解 决 之 后 请 给 个 回馈 


黑客 也 有 解决 不 了 的 问题 。 如 果 你 通过 其 他 途径 解决 了 问题 ， 请 给 当初 帮 过 你 的 人 一 个 回馈 ， 说 说 问题 的 原因 在 哪里 ， 如 何 解 决 的。 即使 是 自己 敲 错 符号 之 类 的 小 失误 ， 也 应 该 说 下 ， 不 要 只 知道 爱 面 
子 ， 这样 至 少 他 将 来 可 以 根据 这 个 失误 去 提醒 别人 。 


六 


当然 ， 如 果 在 论坛 ， 应 该 在 原 提问 帖 回 帖 ， 如 果 在 QQ 群 ， 就 在 群 里 再 重复 一 下 当初 的 问题 并 给 出 解决 方案 ， 这 也 是 新 手 对 社区 的 一 种 贡献 方式 。 


如 果 把 解决 问题 的 过 程 发 布 在 博客 ， 请 注意 感谢 下 帮助 过 你 的 人 并 “@” 对方。 如果 是 在 某 人 的 启发 下 解决 了 问题 的 关键 点 ， 还 应 该 在 正文 中 特别 提 及 他 。 尊 重 知识 、 尊 重 版 权 才 能 莒 造 出 一 个 良好 的 
社区 氛围 。 


典型 的 坏 问题 和 好 问题 


坏 问 题 黑客 怎么 想 好 问 题 
我 界面 显示 乱 了 这 不 像 大 问题 ， 但 可 能 得 | ”我 的 页 面 样式 正常 ， 但 是 应 该 出 现 变 量 的 地 方 出 现 的 都 
Re 花 十 分 钟 问 清楚 ， 算 了 吧 : 花 括号 。 页 面 图 和 console log 见 附件 


Chrome 中 ， 页 面 停 止 啊 应 。 鼠 标 键 盘 都 输入 不 了 ， 关 
ye 


闭 也 不 行 ， 只 能 杀 掉 当前 页 ， 重新 打开 后 还 是 这 样 。 见 
http://jsfiddle.net/xxx 


A 这 是 我 儿子 吗 ? 不 是 ! 
下 | el 1 尺 记 我 
续 忙 我 的 

我 做 Hybrid 三 年 了 ， 越 我 要 开发 菲 容 iPhone 和 Android 手机 的 App， 求 推荐 


替 懂 Hybrid 开发 ? ER ， 志 冯 le i 
性 做 Hybrid 开发 ? | 越 不 敢 说 黎 ， 不 敢 回 基于 Angular 的 Hybrid 开发 工具 和 框架 


踢 场 子 的 ? 算 了 ， 先 忙 ， 我 的 问题 http://some.url 一 个 月 都 没 人 理 了 ， 我 是 新 人 ， 


论坛 没 高 手 了 吗 ? A Ce 2 a 
C 坛 没 商 手 了 吗 有 空 了 再 骂 他 请 帮 有 我 改进 下 提问 方式 


